アニメーション & トランジション
アニメーション & トランジションに分類されるWeb表現技法11件。staggered リスト出現、モーフィングローダー、無限マーキー、イージング比較デモ など。ライブデモとコピーできるコード付き。
staggered リスト出現
リスト各行を時間差でフェード&スライドインさせる演出。タスク一覧や検索結果の登場アニメーションに使えます。
モーフィングローダー
SVGパスの点群をイージング補間して滑らかに形を変えるローディング表現。待機画面のアクセントに最適です。
無限マーキー
トラックを複製しtranslateX(-50%)で継ぎ目のない横スクロールループを実現。お知らせ帯やロゴ流しに使えます。
イージング比較デモ
linearからback・anticipateまで複数のtiming-functionを同時に走らせて違いを体感できます。モーション設計の学習に。
パルス通知バッジ
アイコン右上のカウントを波紋とポップで強調する通知バッジ。更新時のアテンション喚起に使えます。
スケルトン→表示遷移
シマー付きスケルトンから実コンテンツへなめらかに切り替えるロード演出。体感速度の向上に役立ちます。
クリップパス円ワイプ
clip-path: circle() を補間し、クリック地点を起点に円が広がってパネルを切り替えるトランジション。
グラデ見出し&光沢
background-clip: text と背景アニメで文字を発光させ、各文字を浮遊させる見出し演出。ヒーローのキャッチに。
3Dフリップカード
ホバーで反転しつつポインタ追従で傾く立体カード。preserve-3dとCSS変数で会員証やプロフィールカードに。
数字ロール(オドメーター)
各桁が 0-9 の縦ストリップを translateY で回転させ、機械式オドメーターのように数値を更新する演出。桁ごとに僅かな遅延を付けて転がる質感を出します。カウンターやKPI表示のアクセントに。
ブラーイン出現
見出しや要素を blur(12px)+scale+opacity 0 の状態から、鮮明・等倍へ連続して立ち上げる登場演出。要素ごとに時間差を付けてフォーカスが合う瞬間を演出します。ヒーローや見出しの初動に。