Webで見られるアニメーションを、使用される技術の観点からいうと、HTML5の現在、次の5つに分けられます。
- JavaScriptによるDOM操作
- CSSアニメーション
- <canvas>要素のアニメーション
- SVGアニメーション
- WebGLアニメーション
1つめの、JavaScriptによるDOM操作は、HTML要素のstyleプロパティをJavaScriptから操作して、位置や色を変える方法です。そのためには、JavaScriptのsetInterval()やrequestAnimationFrame()などの関数を使って、1秒間に60回、CSSプロパティのtopやleft、colorなどの値を変更します。またjQueryやGreenSockといったJavaScriptライブラリを使ったアニメーション表現もここに含まれます。
2つめのCSSアニメーションは、CSS3で追加されたCSS AnimationsやCSS Transitionsを使った方法です。JavaScriptは必要ありませんが、使った方がより細かな制御が行えます。
3つめの<canvas>要素のアニメーションは、HTML5で追加された<canvas>要素の世界の中でアニメーションを描画する方法です。キャンバスのイメージ世界には、JavaScriptを使ってアクセスします。
4つめのSVGアニメーションは、以前から存在したものの、仕様の不統一により普及が進まなかった<svg>要素を使った方法です。HTML5の現在、<svg>要素は、軽量なベクターグラフィックが表現できる要素として注目されていますが、アニメーションの手法としては、かなり特異です。
5つめのWebGLアニメーションは。3DCGがWebブラウザで表現できる方法で、JavaScriptを駆使して挑みます。実際の操作はかなり難解ですが、three.jsというJavaScriptライブラリを利用すると、難解な崖は少し緩やかになります。
以前はFlashのSWFアニメーションや、DirectorのShockwave、Shockwave3Dアニメーションなどがありましたが、今ではすたれてしまいました。