CSSアニメーションが動かない時の裏技
iOS版のSafariでしか検証していません。このブラウザはHTMLやCSSが複雑になってくると、どうも資源節約のためかアニメーションの描画をサボる傾向(機能?)があるようです。そこで、以下のプロパティを指定してやるとGPU(アクセラレータ)が利用されるようになり、驚く程スムーズにアニメーションが表示されるようになります。
#foo {
-webkit-transform-style: preserve-3d;
}
参照URLでも言及されているように、本来は3D描画を行うための設定なので、どんな場面でも効果が出るのかどうかは分かりません。
参考URL
この記事は役に立ちましたか?
- EnglishWorm.com
- SinglesFan.com
- LmLab.net
- サイトマップ
- 運営者について