← IndexAnimation Patterns ↻ Replay All
A Reference Guide

アニメーションパターン
+ Claude指示テンプレート集

Webサイトでよく使うアニメーションパターン96種を、CSS実装例とClaudeへの指示テンプレートつきでまとめたリファレンス。「あの動き、なんて言えばいいんだっけ」をなくすチートシート。

お気に入り

0
各アニメーションのボタンで追加。後で見返したいアニメをここに集められます。
CATEGORIES
All 96 出現 14 注意喚起 12 連続 12 退場 6 文字 19 その他 19 ホバー 9 スタッガー 5 イージング 8 テンプレ Tips
アニメーションは無限ループしています。リセットしたい時にクリック。
01 — ENTRANCE

出現アニメーション

要素が画面に現れる時の動き。ページロード、スクロールイン、モーダル表示などで使う。

Fade In
透明度が0から1に変化する基本動作。最も控えめで汎用的。
fade-inopacity
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
Fade In Up
下から少し上昇しながらフェードイン。Webで最頻出のスクロール出現演出。
fade-in-upslide-up
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
Slide In Left
左側から滑り込んで現れる。サイドパネルやドロワーで定番。
slide-in-left
@keyframes slideLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
Slide In Right
右側から滑り込む。トースト、通知、ドロワーで頻出。
slide-in-right
@keyframes slideRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
Zoom In / Scale Up
小さい状態から拡大して現れる。モーダル、ポップアップでよく使う。
zoom-inscale-up
@keyframes zoomIn { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
Zoom Out / Scale Down
大きい状態から縮小して現れる。インパクトを抑えたい時に。
zoom-outscale-down
@keyframes zoomOut { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
Rotate In
回転しながらフェードイン。遊び心のある演出。
rotate-in
@keyframes rotateIn { from { opacity: 0; transform: rotate(-180deg) scale(0.5); } to { opacity: 1; transform: rotate(0) scale(1); } }
Flip In X
X軸を中心に3D回転して現れる。カードを表に返すような動き。
flip-in-x3d-rotate
@keyframes flipX { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0); opacity: 1; } }
Slide In Top
上方向から滑り込んでくる。トースト通知、ヘッダーの定番。
slide-in-top
@keyframes slideTop { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } }
Slide In Bottom
下方向からせり上がる。CTAバー、フローティングUIで頻出。
slide-in-bottom
@keyframes slideBottom { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
Flip In Y
縦軸を中心に回転して登場。本のページをめくるような動き。
flip-in-y
@keyframes flipY { from { opacity: 0; transform: perspective(400px) rotateY(90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }
Bounce In
弾むようなイージングで現れる。ポップアップ、新着バッジに。
bounce-inelastic
.element { animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes bounceIn { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
Back In Down
少し行き過ぎて戻ってくる動き。洗練された出現演出。
back-in-downovershoot
.element { animation: backIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes backIn { from { opacity: 0; transform: translateY(-60px) scale(0.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
Light Speed
高速スライド+傾斜変形のスタイリッシュな登場。動きのあるブランドサイトに。
light-speedskew slide
@keyframes lightSpeed { from { opacity: 0; transform: translateX(-100px) skewX(30deg); } to { opacity: 1; transform: translateX(0) skewX(0); } }
02 — ATTENTION

注意喚起アニメーション

ユーザーの注意を引きたい時に使う動き。エラー表示、CTA強調、通知などに。

Bounce
ジャンプして弾むような動き。「下にスクロール」アイコンで定番。
bounce
@keyframes bounce { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-30px); } 75% { transform: translateY(-15px); } }
Shake
左右に揺れる動き。エラー、認証失敗のフィードバックの定番。
shakeerror feedback
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
Pulse
心臓のように拡大縮小する。録画中インジケーター、未読通知に。
pulse
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
Heartbeat
本物の心拍のような2連打パルス。いいねボタン、緊急通知に。
heartbeat
@keyframes heartbeat { 0%, 28%, 70% { transform: scale(1); } 14%, 42% { transform: scale(1.2); } }
Wiggle
小さく回転して揺れる。可愛らしい注意喚起、絵文字アニメに。
wiggle
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
Tada
スケール+回転を組み合わせた華やかな動き。成功通知や祝福に。
tadacelebration
@keyframes tada { 0%, 100% { transform: scale(1) rotate(0); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70% { transform: scale(1.1) rotate(3deg); } 40%, 60% { transform: scale(1.1) rotate(-3deg); } }
Rubber Band
ゴムのように縦横に伸縮する。柔軟さや弾性を表現したい時に。
rubber-band
@keyframes rubber { 30% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.75, 1.25); } 50% { transform: scale(1.15, 0.85); } 100% { transform: scale(1); } }
Jello
プルプルしたゼリーのようなskew変形。柔らかい注意喚起に。
jelloskew
@keyframes jello { 11% { transform: skew(-12.5deg, -12.5deg); } 22% { transform: skew(6.25deg, 6.25deg); } 33% { transform: skew(-3.125deg, -3.125deg); } 100% { transform: skew(0); } }
Vibrate
高速で細かく振動する。スマホのバイブ風、緊急性の高い通知に。
vibratefast shake
@keyframes vibrate { 20% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(2px, 2px); } 100% { transform: translate(0); } }
Head Shake
「いいえ」と首を振るような動き。否定的なフィードバック、削除確認に。
head-shakeno
@keyframes headShake { 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } }
Wobble
大きく左右にぐらつく動き。エラー、警告、不安定さの表現に。
wobble
@keyframes wobble { 15% { transform: translateX(-25px) rotate(-5deg); } 30% { transform: translateX(20px) rotate(3deg); } 45% { transform: translateX(-15px) rotate(-3deg); } 60% { transform: translateX(10px) rotate(2deg); } 100% { transform: translateX(0); } }
Hinge
蝶番が外れて落ちるドラマチックな退場。劇的な削除アクションに。
hingedrop fall
.element { transform-origin: top left; animation: hinge 2s ease-in-out forwards; } @keyframes hinge { 20%, 60% { transform: rotate(80deg); } 40% { transform: rotate(60deg); } 80% { transform: rotate(60deg) translateY(700px); } 100% { opacity: 0; } }
03 — CONTINUOUS

連続アニメーション

ループし続ける動き。ローディング、装飾、プレースホルダーに使う。

Spin / Rotate
永遠に回り続ける。ローディングスピナー、歯車アイコン。
spinrotate
@keyframes spin { to { transform: rotate(360deg); } } /* duration: 1s, linear */
Float
上下にゆっくり浮遊する動き。ヒーロー画像、アイコン装飾。
floatlevitate
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
Breathe
ゆっくり拡大縮小+透明度変化。瞑想アプリ、生きてる感の演出。
breathe
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
Ripple Glow
box-shadowで波紋のように広がる。ライブインジケーター、CTAボタン。
ripplepulse-shadow
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.15); } 50% { box-shadow: 0 0 0 18px rgba(0,0,0,0); } }
Orbit
中心を周回する動き。transform-originをずらして実装。装飾的。
orbitcircular motion
.dot { transform-origin: 7px 47px; /* 中心からの距離 */ animation: orbit 3s linear infinite; } @keyframes orbit { to { transform: rotate(360deg); } }
Hello, world!
Typewriter
文字が1つずつ打たれていく演出。ヒーロー見出し、ターミナル風UI。
typewritertyping
.typewriter { width: 16ch; overflow: hidden; white-space: nowrap; border-right: 2px solid #000; animation: type 4s steps(20), blink 0.8s step-end infinite; }
BREAKING NEWS·2026·BREAKING NEWS·2026·
Marquee
テキストが横に流れ続ける。装飾的、ニュースティッカー、ロゴ列。
marqueeinfinite scroll
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* track内のテキストを2倍に複製してシームレスに */
Wave Bob
上下と左右の傾きを組み合わせた波のような動き。船、葉っぱの揺れに。
wave bobdrift
@keyframes waveBob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-10px) rotate(5deg); } 75% { transform: translateY(-10px) rotate(-5deg); } }
Slow Spin
ゆっくり回り続ける装飾的な動き。バックグラウンドの装飾要素、ロゴアニメに。
slow spindecorative rotation
.element { animation: spin 4s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
Pulsing Dot
中心が拍動しながら周りに波紋。ライブ配信、録画中、未読通知の定番。
pulsing dotlive indicator
@keyframes pulsingDot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232,83,110,0.5); } 20% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(232,83,110,0.2); } }
Loading Dots
3つのドットが順番に弾むローダー。ChatGPTの「考え中」表示でお馴染み。
loading dotsthinking
.dot { animation: dotBounce 1.2s ease-in-out infinite; } .dot:nth-child(2) { animation-delay: 0.15s; } .dot:nth-child(3) { animation-delay: 0.3s; } @keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.3; } 30% { transform: translateY(-12px); opacity: 1; } }
Conic Spin
conic-gradientで作るリングローダー。borderスピナーよりモダンな見た目。
conic gradientmodern spinner
.spinner { background: conic-gradient(from 0deg, #111, #888, #111); border-radius: 50%; animation: spin 1.5s linear infinite; }
04 — EXIT

退場アニメーション

要素が消える時の動き。トーストの消去、ページ遷移、要素削除に。

Fade Out
透明度1→0で消える。最も基本的な退場演出。
fade-out
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
Slide Out Down
下方向にスライドしながら消える。トースト、通知の自動消去で頻出。
slide-out-down
@keyframes slideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(60px); } }
Fade Out Up
上方向にスライドしながらフェードアウト。完了通知の消去に。
fade-out-up
@keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-60px); } }
Zoom Out Exit
縮小しながら消える。モーダルクローズ、要素削除に。
zoom-outscale exit
@keyframes zoomOutExit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.3); } }
Slide Out Left
左方向にスライドしながら消える。スワイプデリートで定番。
slide-out-leftswipe delete
@keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100px); } }
Roll Out
回転しながら横にスライドして消える。プレイフルなUI、ゲーム系。
roll-outtumble exit
@keyframes rollOut { from { opacity: 1; transform: translateX(0) rotate(0); } to { opacity: 0; transform: translateX(100px) rotate(360deg); } }
05 — TEXT

文字アニメーション

見出しやコピーを印象的に見せる文字のアニメーション。ヒーロー、CTA、強調したい部分で使う。

PREMIUM
Letter Slide Up
1文字ずつ下から現れる定番の見出しアニメ。Awwwardsサイトでよく見るやつ。staggerで時差をつける。
letter-slide-upstagger text
.word { overflow: hidden; } .word span { display: inline-block; transform: translateY(100%); animation: slideUp 0.8s ease-out forwards; animation-delay: calc(var(--i) * 0.05s); }
WELCOME
Letter Fade
1文字ずつ順番にフェードイン。シンプルで上品。長めの見出しにも合う。
letter-fadechar fade-in
.word span { opacity: 0; animation: fadeIn 0.6s ease-out forwards; animation-delay: calc(var(--i) * 0.06s); }
FOCUSED
Letter Blur In
ぼやけた状態から鮮明に。最近の高級ブランドサイトで頻出のスタイリッシュな表現。
blur-indefocus reveal
.word span { opacity: 0; filter: blur(12px); animation: blurIn 0.8s ease-out forwards; } @keyframes blurIn { to { opacity: 1; filter: blur(0); } }
We are
creative.fast.here.
Word Swap / Rotating Words
「We are ___」の___部分が単語を切り替えるパターン。ヒーローコピーで複数のメッセージを見せたい時に。
word swaprotating words
.swap-box { height: 1em; overflow: hidden; } .swap-list { animation: swap 6s steps(3) infinite; } @keyframes swap { to { transform: translateY(-3em); } }
SHIMMER
Gradient Sweep
テキストを横切る光のグラデーション。CTAの強調や、見出しのアクセントに。
gradient textsweep
.text { background: linear-gradient(90deg, #000 40%, #fff 50%, #000 60%); background-size: 200% 100%; -webkit-background-clip: text; color: transparent; animation: sweep 3s linear infinite; }
Underline draw
Underline Draw
テキストの下に線が左から右に引かれる。リンクのホバーや見出しの強調に最頻出。
underline drawlink hover
.link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .link:hover::after { transform: scaleX(1); }
Highlighted
Highlight Sweep
蛍光ペンで線を引くようなハイライト効果。重要キーワードを目立たせたい時に。
highlight sweepmarker
.highlight { position: relative; } .highlight::before { content: ''; position: absolute; inset: 0; background: yellow; z-index: -1; width: 0; animation: hl 1s ease-out forwards; } @keyframes hl { to { width: 100%; } }
Number Counter
「0 → 1000」と数値が増えていく演出。実績ページの統計、料金、KPI表示で頻出。
countercount-up
// JSで実装(IntersectionObserver + requestAnimationFrame) const animate = (el, target, duration) => { let start = 0; const step = (ts) => { const progress = Math.min(ts / duration, 1); el.textContent = Math.floor(progress * target); if (progress < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); };
GLITCH
Glitch Text
RGBチャンネルがずれてバグった風に見える演出。サイバー、ゲーム、Y2K系のサイトに。
glitch textrgb shift
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; } .glitch::before { color: red; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: glitch 2s infinite; } .glitch::after { color: cyan; clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
WAVERS
Wave Text
文字が順番に上下する波のような動き。プレイフルなサイト、ゲーム系で。
wave textundulate
.word span { display: inline-block; animation: wave 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s); } @keyframes wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
SHIMMER
Shimmer / Metallic
金属やホログラフィックっぽい光沢が走る効果。プレミアムなブランド、限定商品の見出しに。
shimmermetallic
.text { background: linear-gradient(110deg, #1a1a1a 30%, #fff 50%, #1a1a1a 70%); background-size: 250% 100%; -webkit-background-clip: text; color: transparent; animation: shimmer 2.5s ease-in-out infinite; }
01234567890
Number Flip / Slot
数字がスロットマシンのように回転して切り替わる。残時間、ランキング、空席数表示などに。
number flipslot machine
.numflip { overflow: hidden; height: 1em; } .roll { display: flex; flex-direction: column; animation: flip 5s steps(10) infinite; } @keyframes flip { to { transform: translateY(-10em); } }
Hello world!
Typing Cursor
文字が打たれていって、最後にカーソルが点滅する。ターミナル風UI、AI回答風。
typingterminal
.typing { width: 11ch; overflow: hidden; white-space: nowrap; border-right: 2px solid; animation: typing 4s steps(11), blink 0.7s step-end infinite; } @keyframes blink { 50% { border-color: transparent; } }
Scramble Text
記号からだんだん意味のある文字に変化していく。マトリックス風、ハッカー風UI。
scrambledecipher
// JSで実装するのが一般的 // 各文字を一定確率でランダム文字に置換 // 時間経過で正解の文字に収束させる // ライブラリ: textScramble.js
OUTLINE
Outline Fill
輪郭だけのテキストが塗りつぶされる。エディトリアル、ファッション系の見出しに。
outlinestroke fill
.text { color: transparent; -webkit-text-stroke: 1.5px #111; transition: color 0.6s; } .text:hover, .text.in-view { color: #111; }
POPPY
Bouncy Letters
各文字が順番に弾むカジュアルな動き。子供向け、ポップなブランドに。
bouncy lettersplayful
.word span { display: inline-block; animation: bouncy 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; animation-delay: calc(var(--i) * 0.08s); } @keyframes bouncy { 30% { transform: translateY(-15px) scale(1.1); } }
ROTATE
3D Letter Rotate
各文字が3D空間でクルッと回る。インパクトのある見出し、ヒーローセクションに。
3d-rotateletter spin
.word { perspective: 400px; } .word span { display: inline-block; transform-origin: 50% 50% -20px; animation: rotate3D 4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s); } @keyframes rotate3D { 25% { transform: rotateY(360deg); } }
SCROLLINGTEXTEFFECTSCROLLINGTEXTEFFECT
Marquee Text
テキストが横方向に無限スクロール。ブランドキーワード列、エディトリアル装飾。
marquee textscrolling band
.marquee { overflow: hidden; width: 100%; } .track { display: flex; gap: 32px; white-space: nowrap; animation: marquee 8s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } }
COLORS
Color Cycle
テキストの色が滑らかに変化し続ける。LGBTQ+対応、レインボー、プライド系演出。
color cyclerainbow
@keyframes colorCycle { 0%, 100% { color: #111; } 25% { color: #0066ff; } 50% { color: #1d9e75; } 75% { color: #e8536e; } }
06 — MORE

その他のアニメーション

特殊な動きや組み合わせ系。場面に応じて使い分けるバリエーション。

Swing
上端を支点に振り子のように揺れる。通知バッジ、ベルアイコンで定番。
swingpendulum
@keyframes swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } } /* transform-origin: top center; */
Flip Card
カードが裏返る3Dアニメーション。詳細表示やQ&A、フリップカードコンポーネントに。
flip card3d flip
.card { transform-style: preserve-3d; transition: transform 0.6s; } .card:hover { transform: rotateY(180deg); } .card .back { transform: rotateY(180deg); backface-visibility: hidden; }
Roll In
回転しながら横からスライドインしてくる。遊び心のあるサイト、子供向けサービスに。
roll intumble
@keyframes rollIn { from { opacity: 0; transform: translateX(-100px) rotate(-360deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
Flash
opacityが0と1を繰り返す点滅。緊急通知、録画中インジケーター、ライブ配信。
flashblink
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
Squeeze
縦横が交互に押しつぶされる動き。クリックフィードバック、ボタンアクションに。
squeezesquish
@keyframes squeeze { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.3, 0.7); } 50% { transform: scale(0.7, 1.3); } 75% { transform: scale(1.1, 0.9); } }
Sway
左右にゆっくり揺らぐ動き。背景装飾、漂う雰囲気の演出に。
swaydrift
@keyframes sway { 0%, 100% { transform: translateX(-15px); } 50% { transform: translateX(15px); } } /* easing: ease-in-out, duration: 3s */
Drop with Bounce
上から落ちて地面でバウンドする物理的な動き。アイテム獲得、新着通知に。
drop bouncegravity
@keyframes drop { 0% { transform: translateY(-80px); } 40% { transform: translateY(0); } 50% { transform: translateY(-15px) scaleY(0.9); } 60% { transform: translateY(0) scaleY(1.1); } 70% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
Clip Reveal
clip-pathで左から右にワイプして現れる。画像のドラマチックな登場に。
clip-revealwipe
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* duration: 1s, ease-out */
Skew Slide
傾斜しながら横にスライドする動きの良いトランジション。ページ遷移、画像切替に。
skew slidetilted enter
@keyframes skewSlide { from { transform: translateX(-100px) skewX(-20deg); opacity: 0; } to { transform: translateX(0) skewX(0); opacity: 1; } }
Magnetic Snap
引き寄せられるように所定の位置へ移動。cubic-bezierでばねっぽい動き。CTAボタンに。
magnetic snapelastic
.element { animation: snap 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes snap { from { transform: translateX(-40px) scale(0.9); } to { transform: translateX(0) scale(1); } }
Color Shift
背景色が滑らかに切り替わる。ライブインジケーター、ホバーエフェクトに。
color shiftbackground transition
@keyframes colorShift { 0%, 100% { background: #111; } 33% { background: #0066ff; } 66% { background: #e8536e; } } /* easing: ease-in-out, duration: 3s */
Notification Pulse
中央のドット+広がる影。未読バッジ、ライブ配信、新着通知の定番。
notification pulselive indicator
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 83, 110, 0.5); } 50% { box-shadow: 0 0 0 16px rgba(232, 83, 110, 0); } }
Jelly
ゼリーのようにプルプル震える動き。ボタンクリック、新着通知に。
jellywobbly
@keyframes jelly { 20% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.85, 1.15); } 60% { transform: scale(1.05, 0.95); } 100% { transform: scale(1); } }
Pop
拡大しながら透明になる、シャボン玉が弾けるような動き。要素削除、いいね演出に。
popburst
@keyframes pop { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
Vortex
大きく回転しながら拡大→縮小して消える。劇的な出現/退場の演出に。
vortexspiral
@keyframes vortex { from { opacity: 0; transform: scale(2) rotate(720deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
Compress
縦方向に押し潰されてから戻る動き。要素のミニマイズ、折りたたみに。
compresssquash
@keyframes compress { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.3); } } /* easing: cubic-bezier(0.7, 0, 0.3, 1) */
Glide
左右に滑空しながら傾く動き。風に乗るような演出、装飾要素に。
glidesoar
@keyframes glide { 0%, 100% { transform: translate(-30px, 0) rotate(0); } 50% { transform: translate(30px, 0) rotate(15deg); } }
Stretch
横方向に大きく伸びる動き。リミットを超える表現、強調に。
stretchelongate
@keyframes stretch { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(2.2); } }
Slide & Spin Through
回転しながら横に滑り抜けていく動き。スライドショー、ページ遷移に。
slide-spinthrow
@keyframes slideSpinThrough { from { opacity: 0; transform: translateX(-80px) rotate(0); } to { opacity: 1; transform: translateX(0) rotate(360deg); } }
07 — HOVER

ホバーアニメーション

マウスオーバー時の動き。ボタン、カード、画像で使う。下のデモは自動再生。

Hover Lift
ホバーで上に少し浮き上がる+影が深くなる。カードの定番ホバー効果。
hover-liftcard hover
.card { transition: all 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
Hover Grow
ホバーで少しだけ拡大。画像サムネイル、商品カードに頻出。
hover-growscale
.thumb { transition: transform 0.3s ease; } .thumb:hover { transform: scale(1.05); }
Hover Tilt
3D空間で傾く。マウス位置に追従させるとさらに豊かに(JS必要)。
hover-tilt3d-hover
.card { transition: transform 0.4s ease; transform-style: preserve-3d; } .card:hover { transform: perspective(400px) rotateX(8deg) rotateY(-12deg); }
Hover Glow
ホバーで色付きの光が広がる。CTAボタン、フォーカスリングに。
hover-glowfocus-ring
.btn { transition: box-shadow 0.3s ease; } .btn:hover { box-shadow: 0 0 0 6px rgba(0, 102, 255, 0.15); }
Hover Shrink
ホバーで少し縮む。「押された感」を出したい時、押下フィードバック。
hover-shrinkpress effect
.btn { transition: transform 0.2s ease; } .btn:active { transform: scale(0.95); }
Hover Rotate
ホバーで少し回転。遊び心のあるカード、SNSアイコンに。
hover-rotate
.icon { transition: transform 0.3s ease; } .icon:hover { transform: rotate(6deg); }
Hover Blur
ホバーするとぼかしがかかる。他の要素にホバーしている時の非アクティブ表現に。
hover-blurdefocus
.list:hover .item:not(:hover) { filter: blur(3px); opacity: 0.7; } /* リスト全体にホバー、自分以外にblur */
Hover Slide Background
ホバーで背景色が左から右にスライドして変わる。CTAボタンの定番。
slide-bgcta hover
.btn { background: linear-gradient(90deg, #111 50%, #06f 50%); background-size: 200% 100%; background-position: left; transition: background-position 0.4s; } .btn:hover { background-position: right; }
Border Draw
ホバーでボーダーが角から順次描かれる。エディトリアルなボタンに。
border-drawstroke-on-hover
.btn::before, .btn::after { content: ''; position: absolute; inset: 0; border: 2px solid #111; clip-path: inset(0 100% 100% 0); transition: clip-path 0.4s; } .btn:hover::before { clip-path: inset(0); }
08 — STAGGER

スタッガー(時差)アニメーション

複数要素を時差で順次アニメーションさせる手法。リスト、ナビ、ヒーロー要素で頻出。

Stagger Up
複数要素が順番に下から現れる。リスト、ナビメニュー、ヒーローテキストで定番。0.1〜0.15秒の遅延が一般的。
staggerstaggered animation
.item { animation: fadeInUp 0.6s ease-out; } .item:nth-child(1) { animation-delay: 0s; } .item:nth-child(2) { animation-delay: 0.1s; } .item:nth-child(3) { animation-delay: 0.2s; } /* GSAPやFramer Motionでstagger: 0.1 と書く */
Stagger Left
複数要素が左から順に滑り込んでくる。ナビメニュー、リスト要素に。
stagger-leftcascade
.item { animation: slideInLeft 0.6s ease-out forwards; animation-delay: calc(var(--i) * 0.1s); } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
Stagger Scale
各要素が順に拡大して現れる。バウンシーなイージングと組み合わせると更に印象的。
stagger-scalepop-in
.item { animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 0.1s); } @keyframes scaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
Stagger Rotate
各要素が回転しながら順番に現れる。装飾的、ブランドサイトに。
stagger-rotate
.item { animation: rotateIn 0.6s ease-out forwards; animation-delay: calc(var(--i) * 0.1s); } @keyframes rotateIn { from { opacity: 0; transform: rotate(-90deg) scale(0.5); } to { opacity: 1; transform: rotate(0) scale(1); } }
Stagger From Center
中央から外側に向かって順次出現。シンメトリーが美しい上級者向けスタッガー。
stagger-centerexpand-out
/* GSAPなら一発: */ gsap.from('.item', { opacity: 0, y: 20, stagger: { from: 'center', each: 0.1 } }); /* CSSなら個別にdelay指定 */
09 — EASING

イージング(緩急曲線)

同じ移動距離でも、加速・減速の違いで印象が大きく変わる。下のドットで動きを比較。

linear
ease
ease-in
ease-out
ease-in-out
bouncy
back
snap
名前 CSS値 使い所
linearlinearスピナー、マーキーなど一定速度が必要なもの
easeeaseCSSデフォルト。控えめな加減速。
ease-inease-in退場時(画面外に消える時)に。
ease-outease-out出現時(画面内に現れる時)に。最頻出。
ease-in-outease-in-out往復するアニメ(pulse, float)に。
bouncycubic-bezier(.68,-.55,.265,1.55)ポンと弾むような表現。
backcubic-bezier(.34,1.56,.64,1)少し行き過ぎて戻る、洗練された動き。
snapcubic-bezier(.7,0,.3,1)高級感のある加速→減速。Apple系で頻出。
10 — PROMPT TEMPLATES

指示テンプレート集

アニメーションを実装する時のClaudeへの指示テンプレート。

TEMPLATE A

基本指示

アニメーションを1つ追加する時
[要素] に [アニメーション名] を追加。
duration: [時間], easing: [曲線],
[ループする/1回だけ]、
[ホバーで発動 / スクロールで発動 / 自動]
TEMPLATE B

スタッガー指示

複数要素を時差で動かしたい時
[複数要素] を [アニメーション名] で
順次表示。各要素 [秒数] ずつ遅延、
全体で [時間] かけて完了。
GSAPなら stagger: 0.1 を使う。
TEMPLATE C

スクロール連動

ビューポートに入ったら発動
[要素] がビューポートに入ったら
[アニメーション名] を1回実行。
Intersection Observerで監視、
threshold: 0.2、once: true。
TEMPLATE D

イージング詳細

動きの質感を細かく指定
[要素] に [アニメーション] を、
easingは [linear/ease-in/snap/back等]、
動きの感じは [機敏に/ふんわり/重厚に]、
duration [秒数]。
TEMPLATE E

連鎖アニメーション

複数アニメを順次発動
[要素A] が [動き] した後、
[要素B] が [動き]、
最後に [要素C] が [動き]。
GSAP timelineまたはanimation-delayで連鎖。
TEMPLATE F

ライブラリ指定

特定のライブラリで実装したい時
[GSAP / Framer Motion / Motion One /
CSS only / Lottie] で実装して。
[要素] に [動き]、
[ライブラリ特有の機能]を活用。
11 — PRO TIPS

アニメーションのコツ

UIアニメーションを上手く使うための実践的なポイント。

01

200〜400msがスイートスポット

UIアニメーションの基本デュレーションは 200-400ms。短いと動きがわからず、長いと待たされる。出現は 300ms、退場は 200ms が目安。

02

ease-outを最頻出に

要素が画面に入る時(出現)はほぼ全て ease-out。止まる前に減速するので自然。出る時(退場)はease-inで加速して消える。

03

transformとopacityだけ動かす

パフォーマンスのため transform と opacity 中心で動かす。width, height, top, left はGPU使えず重い。

04

動きすぎは避ける

動かしたいから動かす、ではなく「機能のため」が原則。アニメーションを多用しすぎると安っぽく見える。注意を引きたい1〜2箇所に絞る。

05

prefers-reduced-motionに対応

OS設定で動きを抑えるユーザーがいる。@media (prefers-reduced-motion: reduce) でアニメを無効化または短縮する配慮を。

06

スタッガーは 50〜150ms

複数要素を時差で動かす時、各要素の遅延は 50-150ms。短すぎると一斉、長すぎると遅く感じる。100msがデフォルト。