GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法

CSS Transitions Module Level 3ではCSSプロパティの数値を変化させ、その結果アニメーションなどの効果を表現することができますが、iOSなどの非力なモバイル端末ではどうしてもカクカクしてしまう場合が多いです。

特に要素の位置を動かすなどの処理はコストが高く、よくカクカクするというか、スムーズにアニメーションしてくれないときが多いです。

iOSではCSS3によるGPUアクセラレーターの利用ができ、GPUアクセラレーターをONにすると、今までカクカクしていたCSSによるアニメーション効果もかなりスムーズになります。

基本的には3D処理をさせている場合に有効になりますが、GPUアクセラレーターによるアニメーション処理を行う際、プロパティの指定方法によってはiOSでチラつくことがありまして、、このチラつきはGPUアクセラレーターのON/OFFが切り替わったタイミングで発生しているようで、GPUアクセラレーターを利用したい場合は、常に3D処理をさせる（常にONにしておく）のがよさそうです。

3D処理のスイッチ（便宜上スイッチと呼びますが）については@さんのハマログに書かれてる以下の記述でも出来るのですが

target { -webkit-transform: translate3d(0, 0, 0); }

transformプロパティを使いたくない場合もあるので、transformプロパティを利用しない方法として

target { -webkit-transform-style: preserve-3d; }

このようにtransform-styleにpreserve-3dを指定すると、その要素のアニメーション処理にはGPUアクセラレーターが利用されるようになります。

指摘もらったので追記、ちょっとわかりにくかったかも

transform-style: preserve-3d はGPUアクセラレーターをONにするためのプロパティではありません。3D処理を行うと指定すると、iOSでGPUアクセラレーターがONになるというだけです。

http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property