HTML

2013-01-13, html

CSSアニメーションが動かない時の裏技

iOS版のSafariでしか検証していません。このブラウザはHTMLやCSSが複雑になってくると、どうも資源節約のためかアニメーションの描画をサボる傾向(機能?)があるようです。そこで、以下のプロパティを指定してやるとGPU(アクセラレータ)が利用されるようになり、驚く程スムーズにアニメーションが表示されるようになります。

#foo {
  -webkit-transform-style: preserve-3d;
}

参照URLでも言及されているように、本来は3D描画を行うための設定なので、どんな場面でも効果が出るのかどうかは分かりません。

参考URL

この記事は役に立ちましたか?