動くWebデザイン
アイディア帳

このサイトでは、下記の技術を組み合わせて動きを実現しています。

1. CSSアニメーションのみで動かす
   （例：テキストナビゲーションの動き）
2. JavaScriptで動きのきっかけを作り、動き自体をCSSアニメーションで動かす
   （例：ハンバーガーメニューの動き）
3. JavaScriptのみで動かす
   （例：ページトップリンクのスムーススクロール）
4. CanvasにJavaScriptを使って描画して動かす
   （例：画面一面に桜が舞う動き）
5. アイコン・イラストをジェネレーターサービスや、JavaScriptやCSSと組み合わせて動かす
   （例：ローディング画面のPNG/GIFアニメーション、SVGアニメーション）