HTML

2013-01-13, html

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

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

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

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

参考URL

http://5509.me/log/gpu-accelerator-with-css
http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property

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