Fade Inフェードイン
ふわっと現れる。最も基本的な表示アニメーション。
Dictionary表現と
表現と
実装。
動きやUIの名前を見ながら、サイトに入れたい表現を探せる辞書です。 相談時の「こういう感じ」を言葉にしやすくします。
Slide Inスライドイン
横からスッと滑り込む。方向は上下左右自由。
Scale Upスケールアップ
小さい状態から拡大して現れる。ポップな印象。
Flipフリップ
カードがめくれるように回転して現れる。
Clip Revealクリップリビール
マスクが開くように徐々に見えてくる。画像やセクション全体に効果的。
Staggerスタガー（順次表示）
複数の要素がポンポンポンと順番に現れる。リストやグリッドに。
Circle Revealサークルリビール
円形に広がりながら背景やセクションが現れる。
Parallaxパララックス
背景と手前の要素が異なる速度で動く。奥行き感が出る。
Sticky Scrollスティッキースクロール
スクロールに合わせてカードや画像が固定され切り替わる。
Horizontal Scroll横スクロール
縦にスクロールすると横にコンテンツが流れる。
Scroll Progressスクロールプログレス
ページの読み進め具合をバーで表示。
Snap Scrollスナップスクロール
スクロールするとセクションごとにピタッと止まる。
Before / Afterビフォーアフター
スライダーで2つの画像や状態を比較できる。
Text Revealテキストリビール
文字が1文字ずつ順に現れる。見出しやキャッチコピーに。
Typewriterタイプライター
タイピングしているように1文字ずつ表示される。
Fluorescent Text蛍光ペンハイライト
蛍光ペンで線を引くように文字がハイライトされる。
Split Textスプリットテキスト
文字が上下や左右に分裂しながら現れる。
Counterカウントアップ
数字が0からカウントアップして止まる。実績数値などに。
Text Gradientテキストグラデーション
文字色がグラデーションでゆっくり変化する。
Hover Liftホバーリフト
マウスを乗せると少し浮き上がる。カードやボタンに。
Hover Scaleホバースケール
マウスを乗せると少し大きくなる。画像やアイコンに。
Rippleリップル（波紋）
クリックした場所から波紋が広がる。ボタンに高級感。
Magneticマグネティック
カーソルに引き寄せられるようにボタンが動く。
Accordionアコーディオン
クリックで開閉する折りたたみ。FAQ や詳細情報に。
Tooltipツールチップ
要素に触れると吹き出しで補足情報が出る。
Marqueeマーキー（流れるテキスト）
テキストやロゴが横に流れ続ける。ブランド感の演出に。
Pulseパルス
要素がドクドクと脈打つ。通知や注目ポイントに。
Spinnerスピナー（ローディング）
読み込み中にくるくる回る。
Shimmer / Skeletonシマー（スケルトン）
読み込み前に光が流れるプレースホルダー。
Floatフロート（浮遊）
ふわふわと浮いているような動き。装飾やアイコンに。
SVG Line DrawSVGラインドロー
線が描かれていくように現れる。ロゴやイラストに。
Page Fadeページフェード
ページ全体がふわっと切り替わる。最もナチュラル。
Page Slideページスライド
次のページが横から滑り込む。アプリっぽい遷移。
Curtainカーテン
幕が上がるように次の画面が現れる。
Morphモーフ
要素が形を変えながら次の状態に遷移する。