アニメーション

動きの技法

• トランジション CSS の transition プロパティで、状態の変化（ホバーなど）を瞬時にではなく滑らかに見せる技法。
• キーフレームアニメーション @keyframes で複数の状態を順番に定義し、animation プロパティで自動的に繰り返し再生させる CSS の技法。
• ホバーエフェクト マウスが乗った（ホバーした）ときに見た目が変化する演出の総称。浮く・沈む・拡大するなどの表現がある。
• 下線アニメーション リンクにマウスを乗せたときに、下線が左から伸びたり中央から広がったりするアニメーションで表示される演出。
• スクロールアニメーション スクロールして要素が画面内に入ったタイミングで、フェードインなどのアニメーションを再生する技法。
• フェードイン 不透明度を 0 から 1 に変化させて、要素をふわっと浮かび上がらせるように表示するアニメーション。
• パララックス 背景と本文をスクロール量に応じて異なる速さで動かし、奥行きのある視差（パララックス）を感じさせる技法。
• スムーススクロール ページ内リンクなどでスクロール先に移動するとき、瞬時にではなくなめらかに移動させる CSS・JS の技法。
• スクロールスナップ スクロールを離すと、途中で止まらずにセクションの区切りへピタッと吸い付くように止まる CSS の技法。
• マーキー テキストやロゴが途切れずに横へ流れ続けるアニメーション。同じ内容を 2 回並べて CSS の @keyframes でループさせる。
• テキストアニメーション 文字を 1 字ずつ順番に表示していく演出。span に分割して順に現れさせる方法と、タイプライター風に打ち込む方法がある。
• マイクロインタラクション クリックやチェックなど、ひとつの操作に対して一瞬だけ返す小さなアニメーション。操作が反映されたことを直感的に伝える。
• スクロールプログレスバー 画面上部に固定した細いバーが、ページを読み進めた分だけ伸びていく、スクロール量を可視化する UI。
• Lottie アニメーション Adobe After Effects で作ったベクターアニメーションを JSON 形式で書き出し、軽量な専用プレイヤーで再生する仕組み。