開発中の Web アプリで CSS3 キーフレーム アニメーションをいくつか試しています。独自のカスタム アニメーションとanimate.cssによって提供されるアニメーションの両方を試しました。結果は同じです。アニメーションは正常に動作しますが、しばらくすると、ブラウザを放っておくと、CPU 使用率が約 100% に達し、そこにとどまります。そのプロセスを強制終了すると Web アプリが強制終了され、CSS アニメーションを削除すると問題が解消されるため、何が原因であるかは疑いの余地がありません。私は主に Chrome を使用していますが、これまで問題が発生していました。
Web アプリのターゲット プラットフォームには、Phonegap 経由の iOS と Android、node-webkit 経由の Windows と OSX が含まれます。私が説明した問題は、モバイル Safari では発生しないようですが、他のプラットフォームではどうでしょうか? これはキーフレーム アニメーションの一般的な問題ですか? これを回避するためのトリックはありますか？
編集:デモ リンクを追加しましたが、問題を再現できません。完全なアプリでは、AngularJS、Angular-UI、Angular-UI-router、Fastclick、Animate.css などの多くのライブラリとフレームワークを使用しています。言うのは難しいですが、アプリからアニメーションを削除すると、100% の CPU 使用率の遅延も解消されました。
HTML:
<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>
Javascript:
document.getElementById('start').addEventListener('click', function(e) {
document.getElementById('ball').classList.add('remove');
});
document.getElementById('reset').addEventListener('click', function(e) {
document.getElementById('ball').classList.remove('remove');
});
CSS:
.ball {
width:100px;
height:100px;
border-radius:100px;
background-color:darkred;
position:absolute;
top:100px;
left:200px;
}
@-webkit-keyframes slide {
from { top:100px; left:200px; }
to { top:100px; left:-100px; }
}
.remove {
animation: slide 1s linear;
-webkit-animation: slide 1s linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}