アニメーション実装集
実務でよく使うCSSアニメーション20例。すべて動くプレビュー付きで、 各ページではコードをその場で書き換えて試せます。ループや大きな動きには prefers-reduced-motion（動きを減らす設定）への配慮を含めています。
ホバー
5例カードのリフト（浮き上がり）
ホバーでカードがふわっと浮き上がる定番エフェクト。translateと二段構えの影で自然な浮遊感を作ります。
編集して試す
ボタンの光沢スイープ
ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。
編集して試す
リンク矢印のナッジ
「詳しく見る →」の矢印がホバーで前に動くマイクロインタラクション。1行のtransitionで完結する最小の気配りです。
編集して試す
ホバーで伸びる下線
テキストリンクにホバーすると、左から右へ滑らかに下線が伸びるアニメーション。ナビゲーションの定番エフェクトです。
編集して試す
ホバーで画像ズーム
枠のサイズは変えずに、中の画像だけがゆっくり拡大するホバーエフェクト。ギャラリーや商品カードの定番です。
編集して試す