CSSアニメーションのいいところ

css3でアニメーションが導入されたことにより、軽くスムーズに動作するアニメーションが導入しやすくなりました。
制作現場でも最近ではレギュレーションに古いブラウザが含まれないケースが増えているので、利用シーンも非常に多くなってきています。
 

2つの機能

cssアニメーションを実装するには2つの方法があります。
 

transition

簡単なアニメーションに向いています。

transition-CSS3リファレンス
 

@keyframes

アニメーションの開始から終了までの任意の経過地点にプロパティを設定してanimationプロパティで実行させます。
transitionよりも比較的複雑なアニメーションの実装が可能です。

animation-CSS3リファレンス
 

パフォーマンスの向上

jsだけでアニメーションさせるよりもjs、cssアニメーションを織り交ぜて実装したほうがパフォーマンスは良いです。

jsの処理は基本的にCPUで処理するのに対し、cssプロパティである、

  • translate(移動)
  • scale(拡大・縮小)
  • rorate(回転)
  • opacity(透明度)

これらのプロパティをcssアニメーションした際はGPUで処理されます。
CPUとGPUで処理を分けることによってCPUの負担を減らしパフォーマンスを向上させることができます。

CPU、GPUに関してはこちらの記事がわかりやすいかと思います。

 

開始、終了イベントを取得

jsでcssアニメーションの開始、終了イベントを取得できます。

$('.hoge').on('webkitTransitionStart transitionstart', function(){
  console.log('transition始まったよ')
});
$('.hoge').on('webkitTransitionEnd transitionend', function(){
  console.log('transition終わったよ')
});
$('.hoge').on('webkitAnimationStart animationend', function(){
  console.log('animation始まったよ')
});
$('.hoge').on('webkitAnimationIteration animationiteration', function(){
  console.log('animation1周したよ')
});
$('.hoge').on('webkitAnimationEnd animationend', function(){
  console.log('animation終わったよ')
});

Android端末対策でベンダープレフィックスを付与しています。
 

まとめ

  • 簡単なアニメーションであればjsよりも実装が容易
  • jsだけで実装するよりcssアニメーションと組み合わせたほうがパフォーマンスが良い
  • cssアニメーションの開始、終了イベントをjs側で取得可能なので連携しやすい