2026年4月16日
CSS アニメーションとは？
「ボタンをふわっと光らせたい」「要素をスライドして表示したい」——そんな動きをJavaScriptなしで実現できるのが CSSアニメーション です。
CSSアニメーションの作り方を覚えると、ページに動きをつけてより魅力的なデザインが作れます。
CSSのアニメーションには主に2種類あります。transition（トランジション）と animation（アニメーション）です。
transition：状態が変わるときの動き
transition（トランジション）は、CSSの値が変わるときに「じわっと変化する」効果をつけます。ホバー（マウスを乗せる）と組み合わせてよく使います。
基本の書き方
.btn {
background-color: #0d9488;
color: white;
padding: 12px 24px;
border-radius: 8px;
transition: background-color 0.3s ease; /* 変化するプロパティ・時間・イージング */
}
.btn:hover {
background-color: #0f766e; /* ホバー時に色が変わる */
}transition の値は プロパティ名 時間 イージング の順で書きます。
| イージング | 動きの特徴 |
|---|---|
ease | 最初ゆっくり→速く→最後ゆっくり（デフォルト） |
linear | 一定速度 |
ease-in | 最初ゆっくり→速く |
ease-out | 速く→最後ゆっくり |
複数のプロパティをまとめて指定
.card {
transform: scale(1);
box-shadow: none;
transition: all 0.3s ease; /* すべてのプロパティに適用 */
}
.card:hover {
transform: scale(1.05); /* 少し大きくなる */
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}📖 詳しくはCSSセレクターの使い方で解説しています。
💡 CSSトランジションでtransitionの詳細を学べます。
animation：繰り返す動き
animation と @keyframes（キーフレーム） を使うと、ホバーに関係なく自動で繰り返すアニメーションが作れます。
@keyframesの書き方
/* アニメーションの動きを定義する */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 要素にアニメーションを適用する */
.box {
animation: fadeIn 0.6s ease forwards;
}from/toの代わりにパーセントで細かく指定することもできます。
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}0%がfrom、100%がtoと同じ意味です。途中の動きを細かく制御したいときはパーセント指定を使いましょう。3段階以上の動きを作るときに便利です。
animationプロパティの値
.spinner {
animation: spin 1s linear infinite; /* 名前 時間 イージング 繰り返し */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}infinite を指定すると無限に繰り返します。ローディングアイコンなどに使えます。
👉 hoverで動きをつける方法も参考にしてください。
ハンズオン：アニメーションを試してみよう
上のコードをHTMLファイルにコピーしてブラウザで開いてみましょう。ボタンにマウスを乗せると大きくなり、カードはページ読み込み時にふわっと現れます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSアニメーション練習</title>
<style>
/* ホバーで大きくなるボタン */
.btn {
padding: 12px 32px;
background-color: #0d9488;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(13,148,136,0.4);
}
/* フェードインするカード */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
background-color: #f0f9ff;
padding: 24px;
border-radius: 12px;
margin-top: 24px;
animation: fadeUp 0.6s ease forwards;
}
</style>
</head>
<body>
<button class="swp-btn swp-btn--primary">ホバーしてみよう</button>
<div class="card">
<h2>フェードインしました！</h2>
<p>ページを読み込むと、このカードがふわっと現れます。</p>
</div>
</body>
</html>🔥 displayプロパティ完全解説で実践してみましょう。
🔗 CSS入門ガイドで基礎から復習できます。
📖 レスポンシブデザインの作り方でアニメーションのスマホ対応を学べます。
animationとtransitionの違い
transitionは「状態が変わったとき（hoverなど）だけ動く」のに対し、animationは「自動で繰り返し動かせる」点が違います。ホバー効果にはtransition、ローディングや注目アニメーションにはanimationを使い分けましょう。
迷ったときの判断基準はシンプルです。「ユーザーの操作がきっかけか？」を考えます。クリックやホバーで動くならtransition。ページ読み込み時や自動で動くならanimationです。
パフォーマンスの注意点
transform と opacity を優先する
アニメーションさせるプロパティは transform と opacity を優先しましょう。これらはGPUで処理されるため、なめらかに動きます。width や margin をアニメーションさせると、再レイアウトが発生してカクつきの原因になります。
will-change の使い方
will-change: transform; を指定すると、ブラウザが事前に最適化を行います。ただし多用するとメモリを消費するので、アニメーションする要素だけに使いましょう。
💡 CSS入門ガイドで基礎を確認できます。
よくある間違い
- animation-fill-modeの指定忘れ：アニメーション終了後に要素が元の状態に戻ってしまうことがあります。forwardsを指定すると、アニメーション終了時の状態を保持できます。フェードインした要素が一瞬で消えるときは、この指定を確認しましょう。
- GPUレイヤーの作りすぎ：will-changeやtransformを多くの要素に指定すると、GPUメモリを大量に消費します。スマホでは特に影響が大きいです。アニメーションする要素だけに絞って指定しましょう。
- Flexboxレイアウト内でのアニメーション：Flexboxで並べた要素をアニメーションさせるとき、widthやheightを変化させるとレイアウト全体が再計算されます。transformを使えば、他の要素に影響を与えずにアニメーションできます。
アクセシビリティ配慮
prefers-reduced-motion メディアクエリ
動きが苦手なユーザー（めまいや酔いを感じる人）のために、アニメーションを減らす設定を尊重しましょう。
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}🔗 Webアクセシビリティで詳しく学べます。
📖 最初のCSSで基礎を固めてからアニメーションに挑戦しましょう。
まとめ
- ✅ transition：状態が変わるときにじわっと変化させる（ホバーと組み合わせる）
- ✅ animation + @keyframes：自動で繰り返すアニメーションを作る
- ✅
ease・linear・ease-outなどのイージングで動きの印象が変わる - ✅
transform: scale()で拡大縮小、translateY()で上下移動できる - ✅
infiniteで無限ループ、forwardsでアニメーション終了後の状態を保持
CSSアニメーションを使いこなすと、ページの印象が大きく変わります。レッスンでさらに詳しく学んでみましょう。
✨ @keyframesの動きをリアルタイムで確認しよう！
duration・timing-function・fill-modeをスライダーで変えながら、5種のアニメーションを即座に再生・停止できる無料ツールです。
CSS Animation ビジュアライザー →