CSSアニメーションとは、JavaScriptを使わずにCSSだけで要素の動きや変化を実現する技術である。@keyframesでアニメーション定義、transitionで状態間の変化、transformで移動・回転・拡縮を制御する。will-changeやtransform: translateZ(0)でGPUアクセラレーションを有効にすると60fpsの滑らかな動きが実現できる。prefers-reduced-motionメディアクエリで動きを抑制するアクセシビリティ配慮も必須。
CSSアニメーションの基本
CSSで要素に動きをつける方法は大きく分けて2つある。transition と animation（@keyframes）だ。まずはこの2つの違いを明確にしておこう。
transition と animation(@keyframes) の違い
| 特徴 | transition | animation(@keyframes) |
|---|---|---|
| トリガー | 状態変化（:hover, :focus, class追加）が必要 | ページ読み込み時に自動再生できる |
| 中間状態 | 開始と終了の2点間のみ | 複数のキーフレームで自由に制御 |
| 繰り返し | 不可（元に戻るだけ） | infinite で無限ループ可能 |
| 向いている場面 | ホバー、フォーカス、状態切替 | ローディング、入場演出、永続アニメ |
transition は「AからBへの変化」をなめらかにする。一方 animation は「A→B→C→D…」と複数の段階を自由に定義でき、自動再生やループも可能だ。ホバー時の色変化なら transition で十分だが、入場アニメーションやローディング表現には animation が必要になる。
animation プロパティの構文
animation プロパティはショートハンドで8つの値を一行で指定できる。
| プロパティ | 意味 | 初期値 |
|---|---|---|
| animation-name | @keyframes で定義したアニメーション名 | none |
| animation-duration | アニメーションの所要時間 | 0s |
| animation-timing-function | 加速・減速の曲線（イージング） | ease |
| animation-delay | 開始までの遅延時間 | 0s |
| animation-iteration-count | 繰り返し回数（infinite で無限） | 1 |
| animation-direction | 再生方向（normal / reverse / alternate） | normal |
| animation-fill-mode | アニメ前後の状態（forwards / backwards / both） | none |
| animation-play-state | 再生/一時停止（running / paused） | running |
@keyframes の書き方
@keyframes でアニメーションの各段階を定義する。from / to の2段階指定と、パーセンテージで複数段階を指定する方法がある。
Point
animation-fill-mode: forwards を指定しないと、アニメーション終了後に要素が初期状態に戻ってしまう。フェードインで表示した要素が一瞬で消えるのはこれが原因だ。入場アニメーションには forwards を必ず指定しよう。
コピペで使えるCSSアニメーション20選
基本を押さえたら、実際のパターン集が本番だ。以下の20パターンは実務で頻繁に使われるアニメーションを6カテゴリに分類し、コードをそのまま流用できるように用意した。CSSアニメーションジェネレーターで値を自由にカスタマイズすることもできる。
フェード系（4パターン）
1. フェードイン
最も基本的な入場アニメーション。要素をふわっと表示する。ページ読み込み時やモーダル表示に。
2. フェードアウト
要素を自然に消す退場アニメーション。通知やトーストメッセージの非表示に。
3. フェードインUp（下から浮き上がる）
スクロール連動の入場演出で最も人気が高いパターン。下から20pxほどスライドしながらフェードインする。
4. フェードインDown（上から降りてくる）
ヘッダーの固定表示やドロップダウンメニューの出現に。上から降りてくる動きは「現れる」印象を与える。
スライド系（4パターン）
5. スライドインLeft（左から）
サイドバーやドロワーメニューの出現に。画面外からスライドして入ってくる演出だ。
6. スライドインRight（右から）
通知パネルやカルーセルのスライド遷移に。左からの逆バージョン。
7. スライドインUp（下から）
モバイルのボトムシートやCTAバーの出現に。画面下から持ち上がる動き。
8. スライドインDown（上から）
アラートバーやクッキー同意バナーの表示に。ページ上部から降りてくる。
スケール・バウンス系（4パターン）
9. ズームイン
モーダルやライトボックスの表示に。中央から拡大しながら出現する。
10. バウンス（弾む）
注目させたい要素やCTAボタンに。弾むような動きで視線を引きつける。
11. パルス（脈打つ）
通知バッジやオンラインステータスの表示に。要素が呼吸するように拡大・縮小を繰り返す。
12. ラバーバンド（伸縮）
ユーザーの操作に対するフィードバックに。ゴムのように伸び縮みする遊び心のあるエフェクト。
回転・フリップ系（3パターン）
13. スピン（永続回転）
ローディングアイコンやリフレッシュインジケーターに。シンプルだが使用頻度は非常に高い。
14. フリップX（横回転）
カードめくりやコンテンツ切替に。Y軸を中心にくるっと回転する。
15. フリップY（縦回転）
カード裏表の切替やプライスカードの演出に。X軸を中心に縦方向に回転する。
ローディング系（3パターン）
16. ドットローダー（3つの点が跳ねる）
データ読み込み中の表示に。3つの点が順番に跳ねるパターン。animation-delay でタイミングをずらすのがポイントだ。
17. スピナー（回転ローダー）
フォーム送信中やページ遷移時の待機表示に。ボーダーの一辺だけ色を変えて回転させる定番パターン。
18. プログレスバー
ファイルアップロードやステップ進行の表示に。バーが左から右に伸びる直感的な表現。
ホバーエフェクト系（2パターン）
19. シェイク（横揺れ）
エラー表示やフォームのバリデーションエラーに。「ダメ」を直感的に伝える横揺れ。
20. ハートビート（心臓の鼓動）
お気に入りボタンや「いいね」の演出に。心臓の鼓動のように2段階で拡大する。
ツールで効率化
上記20パターンすべてをCSSアニメーションジェネレーターで値を微調整してカスタマイズできる。duration、delay、イージングをスライダーで変えるだけで、プロジェクトに合ったアニメーションが完成する。
イージング関数（timing-function）の使い分け
イージング関数はアニメーションの「加速・減速」のカーブを制御するプロパティだ。同じ動きでもイージングを変えるだけでまったく違う印象になる。選び方には明確な指針がある。
| イージング | 特徴 | 使い所 |
|---|---|---|
ease |
ゆっくり始まり、加速し、ゆっくり終わる | 汎用（デフォルト） |
ease-in |
ゆっくり始まり、加速して終わる | 退場アニメーション |
ease-out |
速く始まり、ゆっくり終わる | 入場アニメーション |
ease-in-out |
ゆっくり始まり、ゆっくり終わる | ループアニメーション |
linear |
等速（加速も減速もなし） | ローディング、回転 |
cubic-bezier() |
カスタムカーブ | こだわりの動きを表現 |
cubic-bezier() の実用例
cubic-bezier() は4つの制御点で独自のイージングカーブを定義できる。以下はWebでよく使われる実用的なカスタムイージングだ。
Point
入場アニメーションには ease-out、退場アニメーションには ease-in を使うのが基本原則だ。人間の直感に合う動きになる。「入ってくるものは勢いよく来てゆっくり止まる」「出ていくものはゆっくり動き出して加速する」と覚えておけばいい。
パフォーマンス最適化
CSSアニメーションはブラウザのレンダリングパイプラインに直結する。使い方を誤るとモバイルで露骨にカクつく。パフォーマンスを維持しながらアニメーションを使うための3つの原則を押さえておきたい。
transform と opacity のみをアニメーションさせる
ブラウザのレンダリングには「レイアウト → ペイント → コンポジット」の3段階がある。transform と opacity の変更はコンポジット段階のみで処理されるため、GPUアクセラレーションが効いて高速だ。一方 width、height、margin、top/left のアニメーションはレイアウトの再計算を引き起こすため、極力避けるべきだ。
will-change プロパティの使い方
will-change はブラウザに「この要素はこれからアニメーションするよ」と事前に伝えるプロパティだ。GPUレイヤーを事前に確保することで、アニメーション開始時の一瞬のカクつきを防げる。
注意
will-change を全要素に指定するのは逆効果だ。GPUメモリを消費し、むしろパフォーマンスが悪化する。実際にアニメーションする要素だけに限定し、不要になったら will-change: auto に戻すこと。
prefers-reduced-motion への対応（アクセシビリティ）
前庭障害を持つユーザーや、動きに酔いやすいユーザーのために、OS設定で「視差効果を減らす」を有効にしている場合がある。prefers-reduced-motion メディアクエリでこれを検知し、アニメーションを無効化またはシンプルな動きに変更するのがアクセシビリティのベストプラクティスだ。
Point
prefers-reduced-motion 対応は「やって当然」の時代になっている。WCAG 2.1 のガイドライン 2.3.3（動きによるアニメーション）でも、不要な動きを抑制する手段の提供が推奨されている。CSS数行で対応できるので、プロジェクトの初期段階でグローバルCSSに入れておくのがベストだ。
JavaScriptとの連携
CSSアニメーションだけでは「スクロールしたら発火」「ボタンクリックで再生」といった動的な制御ができない。JavaScriptと組み合わせることで、ユーザーの操作やスクロール位置に応じたアニメーション制御が実現する。
Intersection Observer でスクロール時にアニメーション発火
Intersection Observer は、要素がビューポートに入ったタイミングを検知するAPIだ。スクロールイベントをリスナーで監視するよりもパフォーマンスに優れている。
classList.add() でクラス切替によるアニメーション制御
ボタンクリック時にアニメーションを再生する場合は、アニメーション用のクラスを動的に追加する。一度付与したクラスを外して再付与すればリプレイも可能だ。
animationend イベントの活用
animationend イベントを使うと、CSSアニメーションの終了タイミングをJavaScriptで検知できる。アニメーション完了後にDOMを削除したり、次のアニメーションをチェーンしたりする場合に使う。
ツールで効率化
アニメーションの duration や easing を何度も調整するのは手間がかかる。CSSアニメーションジェネレーターでリアルタイムにプレビューしながら値を詰め、完成したコードをコピーすれば効率的だ。
実用CSSアニメーション10選
ここまでの基本とパターン集に加え、フリーランスの実務でそのまま使える10パターンを厳選した。コードはコピペでそのまま動く。値を微調整したい場合はCSSアニメーションジェネレーターで試すのが手っ取り早い。単位の使い分けに迷ったらCSS単位の使い分けガイドも参照してほしい。
1. フェードイン
ページ読み込み時やモーダル表示で要素をふわっと出す、最も基本的な入場演出。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}使い所: セクションの初期表示、モーダルの出現、通知トーストの表示。
2. スライドイン（左から）
画面外から要素がスライドして登場する。ドロワーメニューやサイドバーの出現に最適だ。
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.slide-in-left {
animation: slideInLeft 0.5s ease-out forwards;
}使い所: ハンバーガーメニュー、サイドナビゲーション、カルーセルのスライド遷移。
3. バウンス
要素が弾むように動く。注目を引きたいCTAや「NEW」バッジに効果的だ。
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-25px);
}
60% {
transform: translateY(-12px);
}
}
.bounce {
animation: bounce 1s ease infinite;
}使い所: スクロール促進の矢印アイコン、目立たせたいボタン、セール告知バッジ。
4. パルス（ボタン用）
CTAボタンの周囲に光の波紋が広がる。「ここを押して」を視覚的に伝える定番パターン。
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
70% {
box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
}
}
.btn-pulse {
animation: pulse 2s ease-in-out infinite;
}使い所: 申し込みボタン、無料トライアルCTA、重要なアクションボタン。
5. ローディングスピナー
ボーダーの一辺だけ色を変えて回転させる。API通信やフォーム送信の待機表示に。
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(99, 102, 241, 0.2);
border-top-color: #6366f1;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}使い所: データ取得中の表示、フォーム送信の待機、画像読み込み中のプレースホルダー。
6. タイピングアニメーション
steps() で文字が一文字ずつ現れる演出。ヒーローセクションのキャッチコピーに映える。
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}
.typing {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 3px solid #6366f1;
width: 0;
animation:
typing 3s steps(20) forwards,
blink 0.7s step-end infinite;
}使い所: ランディングページのキャッチコピー、ポートフォリオのヒーロー演出、ターミナル風UI。
7. シェイク（エラー表示用）
フォームのバリデーションエラーで入力欄を横に揺らす。「入力に問題がある」ことを直感的に伝える。
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% {
transform: translateX(-4px);
}
20%, 40%, 60%, 80% {
transform: translateX(4px);
}
}
.shake {
animation: shake 0.5s ease;
}使い所: フォームバリデーションエラー、ログイン失敗のフィードバック、必須項目の未入力警告。
8. スケールアップ（ホバー）
カードやボタンにホバーすると少し拡大する。transition で実装するのが定石だ。
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
/* クリック時に押し込む演出を追加 */
.card:active {
transform: scale(0.98);
}使い所: カード型レイアウトのホバー、画像ギャラリー、ボタンのインタラクション。
9. グラデーション移動
背景のグラデーションがゆっくり流れる。ヘッダーやヒーローセクションの背景に高級感を出す。
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-bg {
background: linear-gradient(
-45deg,
#6366f1, #8b5cf6,
#06b6d4, #34d399
);
background-size: 300% 300%;
animation: gradientMove 8s ease infinite;
}使い所: ヒーローセクションの背景、ランディングページの装飾、ボタンの背景演出。
10. スクロール連動表示
IntersectionObserver で要素がビューポートに入ったらCSSクラスを付与し、アニメーションを発火させる。JavaScriptとCSSの合わせ技。
/* CSS */
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.scroll-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}// JavaScript
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.15 }
);
document.querySelectorAll('.scroll-reveal')
.forEach((el) => observer.observe(el));使い所: コーポレートサイトのセクション入場演出、ポートフォリオの実績表示、LPのコンテンツ出現。
ツールで効率化
上記10パターンの duration・easing・delay をCSSアニメーションジェネレーターでリアルタイムにプレビューしながら調整できる。スライダーを動かすだけでプロジェクトに最適な値が見つかる。登録不要・完全無料。