JavaScript、CSS、jQueryによるアニメーション

ウェブサイトで、よく使われるアニメーションですが、JavaScript、CSS、jQueryの3種類でそれぞれコーディングしてみました。今回はその感想を書きます。ちなみにウェブ業界でいうアニメーションとは、連続して動くことです。

まずはアニメーションのデモです。

JavaScript

なんとかアニメーションを作ることができましたが、動きの秒数とか細かい指定が出来ません。調べてもわかりませんでした。本当は下の２つと同じ動きにしたかったのですが、私のスキルではこれが限界です。

CSS

JavaScriptの知識が無くても作れるので、難易度は低いです。また、途中で動きを変化させるなど細かい設定が出来ます。その点は良いですが、他の動作（イベント）と関連させるのは面倒です。例えば、ボタンをクリックしたときに動作させる時やスクロールしたときに動作させる時などです。

jQuery

CSSほど細かい設定は出来ませんが、大概のことは可能です。なんといっても他の動作（イベント）と関連させることが簡単に出来ます。その辺も考慮すると全体的にはjQueryが使いやすいです。

まとめ

JavaScriptはちょっと使えないです。動きの滑らかさは、CSSが良かったです。細かい指定もできるし、本当はCSSで書きたいのですが、総合的に考えるとjQueryですかね。理想は、CSSで書いて、他の動作（イベント）と関連させるにはjQueryを使うのが良いです。しかし、面倒なんで全部jQueryでコーディングするのが現実的ではないでしょうか。