実務でよく使うCSSアニメーション18例。すべて動くプレビュー付きで、 各ページではコードをその場で書き換えて試せます。ループや大きな動きには prefers-reduced-motion（動きを減らす設定）への配慮を含めています。
ホバーでカードがふわっと浮き上がる定番エフェクト。translateと二段構えの影で自然な浮遊感を作ります。
ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。
「詳しく見る →」の矢印がホバーで前に動くマイクロインタラクション。1行のtransitionで完結する最小の気配りです。
最も定番のローディングスピナー。border+border-radius+rotateの3点セットで、画像なしの数行で実装できます。
3つのドットが順番に跳ねるローダー。animation-delayをずらすだけで「順番に動く」リズムが生まれます。
コンテンツ読み込み中のプレースホルダー。グラデーションのbackground-positionを動かして「光が流れる」質感を作ります。
リスト項目が下から順番にふわっと現れる入場アニメーション。animation-delayの時間差で「流れ」を作ります。
JavaScriptなしで「要素が追加された瞬間」にアニメーションする最新手法。トースト通知や動的リストの定番になりつつあります。
スクロールに連動して要素がフェードインする演出を、JavaScriptなしのanimation-timeline: view()で実装します。
文字が1文字ずつ打たれていくタイプライター演出。steps()イージングとwidthアニメーション、点滅キャレットの組み合わせです。
文字の中をグラデーションが流れ続けるヒーロー見出し向けの演出。background-clip: textが主役です。
1文字ずつ上下に波打つ楽しげなテキスト演出。文字をspanに分けてanimation-delayをずらすスタッガーの応用です。
ハートを押すと弾んで膨らむ「いいね」アニメーション。checkboxハックとオーバーシュートするイージングが鍵です。
入力エラーをプルプルと震えて知らせるフィードバック。:user-invalidと組み合わせるとJavaScriptなしで動きます。
iOS風のオン/オフスイッチ。checkbox+擬似要素+transitionの組み合わせで、ノブの移動に弾みを付けます。
ヒーローセクション向けの、ゆっくり揺らめくグラデーション背景。background-positionだけを動かす軽量な実装です。
通知ドットやライブ配信中バッジで使われる、波紋が広がり続ける演出。scaleとopacityの同時アニメーションです。
背景装飾の定番、ゆっくり漂う半透明の円。duration違いの同じアニメーションを重ねて有機的な動きを作ります。