1
パルスアニメーションを書きましたが、正しく動作しません。この画像はFirefoxブラウザでのみひどく揺れています。私はそれを防ぐために何ができますか？CSSアニメーションがFirefoxで動揺しています
.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>私はスタック上のいくつかのコードスニペットを見てきましたが、彼らは私を助けていませんでした。
ありがとうございます。それは動作しますが、なぜですか？ –
@AnastasiaAntontseva実際に私は知らないが、それは私を助ける。私はよりエレガントな解決策があると思います。 –
このスニペットもFFで動揺しています。あなたが滑らかなアニメーションをしたい場合は 、1から0.8不要 1へのあなたより良いスケールは が http://codepen.io/janwagner/pen/LbYMyR – Cherrypig