CSS3 アニメーション (キーフレーム) がたくさんあるレスポンシブ Web サイトに取り組んでいます。
デスクトップの Chrome ブラウザーで問題なく動作しますが、サイトはモバイルには重すぎて、ブラウザーがクラッシュしたり、場合によってはデバイスを再起動したりすることさえあります (LOL)。
私はレスポンシブ アニメーションと CSS アニメーションの両方に慣れていません。アニメーションを最適化して、クラッシュすることなくモバイル デバイスで動作するように助けてもらいたいと思っています。
すべてのアニメーション (キーフレーム) を、上/左の位置を使用して translate3D を変換するように変更しました。また、animation-play-state をデフォルトで「一時停止」に設定し、要素の領域に到達したとき (ビューポートにあるとき) にのみ「実行中」に変更します。
これ以上何ができますか？または、それについては何もできないので、モバイル デバイスでは常にアニメーションを一時停止する必要がありますか?
一般的に私に返信するか、次のリンクのサイトにアクセスしてください -
* モバイルで開かないでください。デバイスが再起動する可能性があります。*
最新の Chrome または Firefox で開いてください: http://goo.gl/BVsVH7
繰り返しになりますが、私はレスポンシブとモバイルの両方に不慣れで、何をすべきで何をすべきでないのかわかりません。