Anastasia Antontseva Anastasia Antontseva - 1 month ago 24
CSS Question

CSS animation is shaking in firefox

I've written some pulse animation but it don't work properly. This image terribly shaking in Firefox browser only. What can i do to prevent it?






.heart::before {
content: "\f004";
color: #E98E1B;
}

.pulseHeart {
-webkit-animation: pulseHeart 1s linear infinite;
-moz-animation: pulseHeart 1s linear infinite;
-ms-animation: pulseHeart 1s linear infinite;
animation: pulseHeart 1s linear infinite;
}

@keyframes "pulseHeart" {
0% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

}

@-moz-keyframes pulseHeart {
0% {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}

}

@-webkit-keyframes "pulseHeart" {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}

}

@-ms-keyframes "pulseHeart" {
0% {
-ms-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}

}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<title>page</title>
<body>
<span class="fa heart pulseHeart"></span>
</body>
</html>





I've seen some code snippets on Stack but they didn't help me.

Answer

You shall to add initial value for transform property.

.heart::before {
    content: "\f004";
    color: #E98E1B;
}

.pulseHeart {
    -webkit-transform: scale(1); // !!! NEW LINE !!!
    -moz-transform: scale(1); // !!! LINE !!!
    -o-transform: scale(1); // !!! LINE !!!
    -ms-transform: scale(1); // !!! LINE !!!
    transform: scale(1); // !!! LINE !!!
    -webkit-animation: pulseHeart 1s linear infinite;
    -moz-animation: pulseHeart 1s linear infinite;
    -ms-animation: pulseHeart 1s linear infinite;
    animation: pulseHeart 1s linear infinite;
}

@keyframes "pulseHeart" {
    0% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

}

@-moz-keyframes pulseHeart {
    0% {
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

}

@-webkit-keyframes "pulseHeart" {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

}

@-ms-keyframes "pulseHeart" {
    0% {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(1);
        transform: scale(1);
    }

}
<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <title>page</title>
  <body>
    <span class="fa heart pulseHeart"></span>
  </body>
</html>