アニメーション CSS VS Javascript

まとめ

単純な遷移にはCSSを使う
複雑な遷移にはJSを使う
可能な限り、transformとopacityの変更にする

ブラウザ描画の流れ

要素に適用するスタイルの計算（Recalulate Style）
それぞれの要素の位置を生成（Layout）
それぞれの要素のピクセルを埋める（Paint）
合成してスクリーンに描画（Composite Layers）

高価なプロパティと安価なプロパティ

アニメーションにはコストがかかり、プロパティによってコストが違う。

高価 width/heightなど

widthやheightなどの、他要素に影響をおよぼすプロパティは、レイアウトが発生する可能性があるため、要素が多い場合には大量のリペイント（再描画）が発生してしまうかもしれないので高コスト。

安価 transform/opacity

transformやopacityは自要素（自分のレイヤー）の変更のみなので、他要素のレイアウトに変更はなくてお得。ChromeのDev Toolで見てみると、Composite Layers（レイヤを合成して描画）のみが発生する。また、モダンなブラウザではこれらの要素のアニメーションはハードウェアアクセラレーションにより最適化される。

ハードウェアアクセラレーションとは

本来CPUで行う処理を他のハードウェア（GPU）でアクセラレーション（高速化）すること。

CSSを使うメリット

JSのメインスレッドと別スレッドで動くため、JSの処理の影響を受けずにアニメーションできる。JSで重い処理をしている時に、JSでアニメーションするとカクつく可能性があるので、できる限りCSSを使うべき。

過剰に最適化する場合は、will-changeプロパティを使うと幸せになれるかも。
https://developer.mozilla.org/ja/docs/Web/CSS/will-change

JSを使う場合

CSSで表現しきれない複雑なアニメーションが必要な場合はJSを使う。JSでアニメーションをループする場合は、setIntervalではなくrequestAnimatinoFrame(IE10から)を用いることで再描画前の最適なタイミングでコールバックが呼び出される。最速で60FPS。
https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame

nishinoshake/readme.md

まとめ