Pocket

要素をアニメーションさせたいときに使えるcss3のkeyframe animationを使用するときのポイントをメモします。


そもそも使えるか

can i useによると、

  1. ・IE10以上
  2. ・ios4以上(要 -webkit-)
  3. ・Andoroid4.0以上(要 -webkit-)

となっています。特にIE9以下や、Andoroid2系や3系の対応が必要な場合は使わないようにしましょう。


要素を動かす際のポイント

ある要素の高さを変更して動かす場合に、topの値を変える方法と、transform translateを使う方法があると思いますが、それぞれ内部での処理が異なるため、iosやAndroidで見たときに動きが異なって見えます。

See the Pen WvPoQV by takuchan (@takuchan) on CodePen.

それぞれ高さを0→300pxに移動させていますが、PCで見ると動きに違いが無いように見えると思いますが、
濃いボックスの方はiosなどで見ると、少しカクカクして動いているように見えると思います。
一方、薄いボックスの方はなめらかに移動していると思います。

これは、topの値を変更すると、毎回再描画が走るため、負荷がかかってしまうことが原因になります。
それに対し、transform translateでは、その要素のみが影響を受けるためスムーズな動きになります。

また、transform2Dの対応状況は、

  1. ・IE9以上(要 -ms-)
  2. ・ios4以上(要 -webkit-)
  3. ・Andoroid2.1以上(要 -webkit-)

に、なりますので、keyframe animationが使用できれば問題ないでしょう。


まとめ

keyframe animationを使って要素を動かす場合は、topやleftのを変更するのではなく、transformを使って、負荷がかからないように組むとなめらかなアニメーションができるかと思います。
また、IE9以下やios3以下、Android3系以下の対応が必要な場合は使用しないようにしましょう。






Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.