アニメーション & 遷移
アニメーション & 遷移に分類されるWeb表現技法21件。staggered リスト出現、無限マーキー、グラデ見出し＆光沢、タブ下線スライド遷移 など。ライブデモとコピーできるコード付き。
staggered リスト出現
リスト各行を時間差でフェード＆スライドインさせる演出。タスク一覧や検索結果の登場アニメーションに使えます。
無限マーキー
トラックを複製しtranslateX(-50%)で継ぎ目のない横スクロールループを実現。お知らせ帯やロゴ流しに使えます。
グラデ見出し＆光沢
background-clip: text と背景アニメで文字を発光させ、各文字を浮遊させる見出し演出。ヒーローのキャッチに。
タブ下線スライド遷移
アクティブタブの実寸を計測し、下線インジケーターを transform で滑走させるタブ切替。内容のフェードと同期し、文字数が違っても正確に追従します。
3Dカードフリップ遷移
CSS 3D Transforms の preserve-3d と backface-visibility で表裏をY軸回転。クリックやキー操作でめくれるプロフィールカードの立体トランジションです。
コマ送りステップアニメ
CSSのsteps()だけで、なめらかさを意図的に捨てた12fps風のコマ送り質感を作ります。商品紹介をストップモーション動画風に見せたいときや、操作感をコミカルにしたい場面に。3匹が飛び飛びに横断します。
ふわふわ浮遊キャラ群
パステル色のキャラクターたちが各々の周期でふわふわ漂い、順番にシュッと弾みます。ゆるふわ系のギャラリーやランディングの賑わいに。サイン波だけで作る軽量な群体アニメーションです。
ブラーイン出現
見出しや要素を blur(12px)+scale+opacity 0 の状態から、鮮明・等倍へ連続して立ち上げる登場演出。要素ごとに時間差を付けてフォーカスが合う瞬間を演出します。ヒーローや見出しの初動に。
イージング比較デモ
linearからback・anticipateまで複数のtiming-functionを同時に走らせて違いを体感できます。モーション設計の学習に。
パルス通知バッジ
アイコン右上のカウントを波紋とポップで強調する通知バッジ。更新時のアテンション喚起に使えます。
スケルトン→表示遷移
シマー付きスケルトンから実コンテンツへなめらかに切り替えるロード演出。体感速度の向上に役立ちます。
3Dフリップカード
ホバーで反転しつつポインタ追従で傾く立体カード。preserve-3dとCSS変数で会員証やプロフィールカードに。
View Transitions API 一覧⇔詳細
ネイティブの View Transitions API で一覧と詳細の切替を自動モーフ。共有サムネに view-transition-name を割り当て、SPA風の滑らかな画面遷移を実現します。
FLIPアニメ並べ替え
FLIP（First-Last-Invert-Play）技法で並べ替え時の位置差分だけをGPUアニメ。シャッフル・ソート・カードクリックで滑らかにリオーダーするリスト遷移です。
カーテン遷移スライダー
上下のパネルが中央で閉じ切る瞬間に裏でコンテンツを差し替えるカーテン演出。シーン切替やページ遷移のつなぎに使える劇的なトランジションです。
モーフィングナビ
ハンバーガーアイコンが×へモーフし、角の円が全面へ広がるメニュー遷移。clip-path とSVGの変形で、ヘッダーの開閉インタラクションを上質に演出します。
クリップパス画像リビール
前面に次の画像を載せ clip-path の斜めワイプで切替えるギャラリー遷移。完了後に背面へ確定する二層構成で、無段差にスライドし続けます。
額縁ズームトンネル
奥の額縁が次々と手前に迫り、最後の一枚の絵の中へ吸い込まれるように進むオープニング演出です。美術館・アーカイブ系サイトの作品世界への導入を、CSS 3Dだけで作ります。
数字ロール（オドメーター）
各桁が 0-9 の縦ストリップを translateY で回転させ、機械式オドメーターのように数値を更新する演出。桁ごとに僅かな遅延を付けて転がる質感を出します。カウンターやKPI表示のアクセントに。
モーフィングローダー
SVGパスの点群をイージング補間して滑らかに形を変えるローディング表現。待機画面のアクセントに最適です。
クリップパス円ワイプ
clip-path: circle() を補間し、クリック地点を起点に円が広がってパネルを切り替えるトランジション。