最近UIで、アニメーションで滑らかに動くサイト増えてきてますが、どういった技術を使ってるのでしょうか？

Question

htmlやcss、jQueryの初歩しか理解してない者です。

Googleマテリアルデザインのアプリやサイトで、タップしたところから動くUIのアニメーションや、ローディングアニメーション、ボタンのアクション時のアニメーションなどなど、やたらと滑らかに複雑に動くアニメーションが増えてきてますが、どんな技術を使ってるのでしょうか？

jQueryでは出来なさそうな気もしますが、別のライブラリ？を使ってるのですか？
勉強したいと思うのですが、どんなことを学べばいいのかキーワードが見つからないので、ヒント教えてほしいです。

例
http://uxmilk.jp/55109

中村勇吾
http://tha.jp

Answer 1

どれもブラウザ依存などの問題があるので、その点についてはご自身で色々考えてください。
学習コストが一番かからないのはCSS3
CANVASはやればやるほど奥が深い。SVG、CANVAS操作でjavascript必須。

CSS3
Animationを定義できるようになったので、それでアニメーションごりごりかけたり。
「CSS アニメーション サンプル」あたりで検索するといっぱい出ます。

SVG
SVG要素を利用してベクタ画像でアニメーションをscript等で動的に表示
「SVG アニメーション サンプル」「SVG ゲーム」あたりで検索するといっぱい出ます

CANVAS
今一番楽しいかも。3D表現とかもできます。割と最近Canvas使ってのゲームやらエフェクト多い。
WEBGLとか使えるのでグラフィック関係に強い。
「CANVAS アニメーション サンプル」「CANVAS 3D サンプル」「CANVAS ゲーム」当たりで検索するといっぱいでます。

Answer 2

※一部のリンクは公式のものではありません

jquery animate

CSSスプライトとstepsを使ってアニメーション画像を作ろう

canvas
もアニメーションを作るのに向いていますが、UIにはあまり向いていません。