1
フォームを保存する必要があるときに保存ボタンが表示されます。ChromeのCSSスケールアニメーションジャーキー
CSS：
@keyframes pulse-scale {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
.btn-alert {
animation: 1s pulse-scale ease-out infinite alternate;
}
HTML：
<button class="btn btn-round btn-alert">
<i class="fa fa-check"></i>
</button>
問題は、私はそれは大丈夫ために使用されると確信しているクローム49に不十分果たしていることですが、今ではスケールとしてそれはそう特定のピクセル位置合わせされたスケールにスナップし、ファジーとシャープの間で切り替えると、「ジャッキーな」アニメーションが生成されます。 Firefox 38でうまくいくようです。 Firefox 38では最初はうまくいきますが、しばらく待ってから（？）、別のウィンドウに切り替えて戻ってもあまり再生しません。
明らかに、これは画像サンプリング（品質）の問題であり、フレームレート（速度）の問題ではありません。それはどのように見えるのビデオです。左から順に、Firefox、Firefox、数分後にChrome。左のものだけが正しく再生しています。
私はそれを再生するように設定することができますCSSのプロパティがあり、より良い - 例えば別の補間モードを使用するように強制しますか？私はキーフレームにadding translateZ(0)を試しましたが、それは役に立たないようです。
クローム50にアップグレードした場合、固定されて表示されますか？ –
@AdnanAkram私は '-webkit-transform'と' -webkit-animation'を試しました。それはあなたの意味ですか？しかし、devのツールによると、それらのプロパティはブラウザによって無視されます（ 'transform'と' animation'に取って代わります）。 – z0r
それは私には変に見えませんか？私はクロム50にいる。あなたは「ジャーキー」とはどういう意味ですか？また、「イージーアウト」で遊んでみて、他の設定を試してみましたか？ 'transition'を使うときにアニメーションを使っている理由は？ – aug