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

※ 今日はフランクな関西弁全開で書いてます

timing-functionってJSで言うてたところのeasingやねん。timing-functionは規定値で

• ease
• ease-in
• ease-out
• ease-in-out
• linear

の5つが用意されとるんやけど、それだけでも結構きれいな数値の変化になるねん。でもカスタム値のcubic-bezierっていうので動きを詳細に決めることができて、これ使うと好きな動きにできるんやで。

linearの動き

例えばlinearの動きはこんな感じに表せるんやけど・・・まだよくわからんよね。

参考

CSS Transitions Module Level 3

http://www.w3.org/TR/css3-transitions/

The ‘transition-timing-function’ Property

http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag

で、このcubic-bezierの指定方法なんやけど、いちいち計算なんかしてられへんから、ツール使ったほうがええよね。とりあえずコレ使ってたらええよっていうのはこれな。

• CSS cubic-bezier Builder

つまみが2つあって、それ動かすと好きなように曲線を変えれるねん。曲線が数値の変化にどう影響するんかってうのは次の図に書いてみたで。動きの比較もできるようになってるから、「Click Here」のとこクリックしてみてや。どんな変化になるんかっていう目安には十分なるから、好きな動きにできると思うで。

あ、そうそう、Y軸は数値の変化、X軸は時間の変化になってるから、それに合わせて考えて曲線動かしてな。ところでJSとかASのeasingにあったbounceとかelasticとかそういう複雑な動きはでけへんから注意しといてや。