nantekkotai's blog

おもに技術とお仕事に関連することを書いています。

CSSとJavaScriptにおけるアニメーションの分担

velocity.jsというものがありまして、アニメーションの制御においてはいままでのjQueryのanimateはもとよりCSSアニメーションと比べてもパフォーマンスが良いとのことです。
http://julian.com/research/velocity/

という話の枕があったとして。
それでも役割は分担できるなと思いましたのでそのメモ。

CSSアニメーションに適していること。

それは、

  • DOM制御を伴わない
  • 装飾的なアニメーション

というもの。
たとえば以下のページのアニメーションは全てCSSで制御されています。
http://tympanus.net/Development/HoverEffectIdeas/

こういうスタイリング的なアニメーションはCSSの方が管理しやすいです。
JavaScriptだとタイミングよって想定していない動作を引き起こす可能性があります。
たとえばアニメーション途中でイベントの向きが切り替わるマウスアクションを行ったりすると、いきなり始点に戻って再度アニメーションを始めるとかありえそうですね。

CSSアニメーションなら途中でイベントの向きが変えても、元に戻るアニメーションが実行されるだけです。
イベント系の管理、想定外の動作に対応するためのコードというものが不要になるので楽なんですね。

JavaScriptで管理すべきアニメーションとは

たとえば通知バーの出し入れとかですね。
もちろん、DOMの表示/非表示だけをJSでやり、アニメーションはCSSで、という分担もありですが、大抵こういう仕組みはアニメーションの終わりをきちんと把握してからDOMを削除したいものなので、全部JSで制御した方がいいと思います。

JavaScriptアニメーションの何が良いのかというと、他のイベントとの連動や関数への伝播などでしょう。
たとえば画面インタラクションから、サーバとの非同期通信を前提としたリストの追加や削除というものに関しては、アニメーション面においてもJavaScriptで制御するのが良いかと思います。

まとめ

JavaScriptCSSで必ず分けなきゃいけないということではないです。
ただ、どちらも役割の違うアニメーションを実装することになるので、無理にどちらかにまとめるよりかは分割した方が、メンテナンス性の高いコードになるかと。