どうやって動いてる？Webサイトのアニメーションあれこれ

こんにちは。カズです。
アニメーションしているサイトを見ながら「これどうやって動いているの？」と聞かれると「・・・javascriptだと思います」となりがちなので、この方法だとこんな動きができます。
と言えるように勉強もかねて、今回はWebサイトで使われているアニメーションについて調べてみました。

javascript（jQuery）

リッチなアニメーションと言えばjavascriptですね。
アニメーション以外にもスライダーやライトボックスなどよく使います。
javascriptのライブラリjQueryを使えば簡単に多様なアニメーションを使うことができます。

CSSアニメーション

CSS3のアニメーション機能を使えば小さなボタンの動きからパララックスなど大きなスクロールアニメーションも実装できます。
CSSを書けて単純な動きならプロパティを調べながらの記述も難しくなくライブラリもあるので、手軽に実装できます。動作も軽量！
下記はよく使うライブラリです。
Animate.css
https://daneden.github.io/animate.css/

SVG（組み合わせ）

SVGはベクター形式の画像です。jpgやpngと違いパスデータで構成されていて、その情報をコード上で編集する事ができます。
javascriptやcssと使うことで文字やイラストをペンで描画するような動きをつけたり、オブジェクトを変形させたりできます。
イラストが綺麗ですね。
WE CRAFT APPS
https://www.wecraftapps.com/

HTML5

HTML5で新たにCanvs要素やWebGLが使えるようになりました。
Canvs要素は図形を書いたりできる描画要素でjavascriptと組み合わせることでFlashのような動きを作ることができます。
WebGLはGPUへのアクセスを可能にするAPIでバリバリの3Dゲームをブラウザ上で動かしたりできるようです。
それ以上のことは分かりませんがこちらのライブラリを見ているだけでも楽しいです。WEBの可能性を感じるっ！
three.js
https://threejs.org/