Webサイトにアニメーションを実装する3つの選択肢 ｜ SiTest (サイテスト) ブログ

ブラウザ上でアニメーションを実装する手法として現在主流となっているのが、CSSアニメーションとjQueryのanimateメソッドによるアニメーションです。
どちらも一長一短と感じており少し複雑な処理を追加するとき無理が生じてしまいます。

長所：
・コールバックで順番を制御できるので全体の制御が楽
・オプションが豊富で自由度が高い
・ブラウザ間の互換性が高い

短所：
・重い、少し複雑な処理を行なうとカクつきだす
・一部使用できないプロパティがある

jQueryのanimateのメリットとしてはとにかく扱いやすいことが挙げられます。
書き方やブラウザの互換性が高い上にオプションでeasing(アニメーションの加減速の関数)をいじれたりプラグインのjQuery Easing Pluginで簡単に追加できます。
逆に短所としてはとにかく重い点が挙げられます。
他にはtransformが指定できないのでsvgなどにも使いづらいです。

長所：
・動作が軽い
短所：
・IE9以下では未対応
・コールバックがないので次の動作への推移はJavaScriptか、delay
・Easingが貧弱
・動作開始処理は擬似セレクタを使うか結局JavaScript頼り

CSSアニメーションはjQueryとは違い動作が軽いです。
これはアニメーションの描画にGPUを使用できるためだそうです。
また単純なアニメーションですとtransitionを使い比較的簡単に実装できます。
ただし欠点も多くまずコールバックといった概念がないので次の動作へのつなぎは実行時間分delayを設定したり、JavaScriptでタイミングを制御する必要があります。
またEasingもjQueryほど楽に実装できるものではなく現状linear,ease,ease-in,ease-out,ease-in-outの5種類しかなくそれ以外のEasingを実装するにはcubic-bezierでベジェ曲線を指定する必要があります。
書き方は

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);

こんな感じで面倒くさい上に3次までしか作れません。(cubicだから当然かも知れませんが4次に相当するプロパティはないです。)
また実行のタイミングですが、jQueryは様々なイベントが使えるのに対しCSSアニメーションは擬似クラスを用いてホバー時に実行したりjQueryでイベントをキャッチしてクラスを追加して実行したりと結局JavaScrip tに頼る必要が出てきます。

以上のようにjQuery、CSSそれぞれ長所、短所があり、少し凝ったアニメーションを実装する時はどちらを使用するべきか頭を抱えていました。
ではそれ以外でJavaScriptのライブラリやCSSのライブラリはないか探してみました。
それらの問題の大半を解決してくれそうなライブラリとしてVelocity.jsを見つけました。
使い方は至ってシンプルでjQueryのanimateメソッドと全く同じです。
加えてjQuery Easing Pluginで実装されるeasingはデフォルトで使用可能です。
またtransformプロパティも使用可能ですので、svgに対してアニメーションを付けることも可能です。

またjQueryの欠点だったアニメーション実行時の重さも改善されてます。
ブラウザの互換性もIE8までは対応しているのでCSSアニメーションより互換性が高いです。
a(href=”http://julian.com/research/velocity/”)http://julian.com/research/velocity/
こちらが公式のURLです、サイト内にいくつかデモがあり非常に軽量なのがわかります。
また一見jQuery前提のライブラリのように見えますが、jQueryなしでも下記のようなコードで使用可能です。

Velocity(document.getElementById("ID"), { opacity: 0.5 }, { duration: 1000 });

今回の記事ではjQuery CSSアニメーション そしてJavaScriptライブラリであるVelocity.jsそれぞれの特徴についてまとめさせていただきました。
かなりVelocity.jsが有用ですが、実装するアニメーション規模によってはCSSアニメーションの方が手軽であったりjQueryの方がコードの汎用性が高かったりします。
どの技術を使って実装するのかまず考えてみるといいかもしれません。