transition は「A→Bの変化」を定義するもの。一方 @keyframes は「時間軸に沿った複雑な動き」を自由に設計できるツールです。
本記事では、5つの実例とイージング比較デモを通じて、CSSアニメーションの基礎から応用までを一気に学びます。
1. バウンス（弾むアニメーション）
「注目してほしい」要素に使える、上下にポンポン弾む動き。通知バッジやCTAボタンのアテンション効果に最適です。
HTML
<div class="anim-box anim-bounce"></div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.anim-bounce {
/* 本体のスタイル */
}
.anim-box {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 1s ease infinite;
}
2. シェイク（左右に揺れる）
エラー状態やバリデーション失敗時に「ブルブル」と揺れるアニメーション。フォーム送信エラーで使うと、視覚的に「何か問題がある」と直感的に伝えられます。
HTML
<div class="anim-box anim-shake"></div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.anim-box {
/* 本体のスタイル */
}
.anim-shake {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
3. 回転＋スケール
ローディングアイコンやインタラクティブな装飾に使える、回転しながら拡大縮小するパターン。複数のプロパティを同時にアニメーションさせる見本です。
HTML
<div class="anim-box anim-rotate-scale"></div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.anim-box {
/* 本体のスタイル */
}
.anim-rotate-scale {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
@keyframes rotateScale {
0% { transform: rotate(0) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
.rotate-scale {
animation: rotateScale 2s ease-in-out infinite;
}
4. グラデーションシフト
背景のグラデーションが流れるように移動するアニメーション。ヒーローセクションやCTAボタンに使うと、高級感のある印象を演出できます。
HTML
<div class="anim-gradient"></div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.anim-gradient {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.gradient-shift {
background: linear-gradient(270deg, #E31010, #ff6b35, #2563eb, #E31010);
background-size: 600% 100%;
animation: gradShift 4s ease infinite;
}
@keyframes gradShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
5. タイプライター効果
文字が1文字ずつ打ち込まれるように表示されるアニメーション。ヒーローセクションのキャッチコピーに使うと、ストーリー性のある演出になります。
Hello, tutawaru!
HTML
<div class="anim-typewriter">Hello, tutawaru!</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.anim-typewriter {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.typewriter {
font-family: monospace;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #E31010;
width: 0;
animation:
typing 3s steps(16) infinite,
blink 0.6s step-end infinite alternate;
}
@keyframes typing {
0% { width: 0; }
50%, 100% { width: 16ch; }
}
@keyframes blink {
50% { border-color: transparent; }
}
おまけ：イージング比較デモ
同じアニメーションでも、イージング（加速・減速のカーブ）が変わるだけで印象が大きく変わります。以下の4つを比較してみてください。
linear
ease
ease-in-out
cubic-bezier
まとめ：アニメーションは「意図」を持たせる
CSSアニメーションは「動かすこと」が目的ではなく、ユーザーに何かを伝えるための手段です。
- バウンス → 「ここを見て！」の合図
- シェイク → エラーや警告の即時フィードバック
- 回転＋スケール → ローディングや装飾
- グラデーションシフト → 高級感・ダイナミックさの演出
- タイプライター → ストーリー性のある導入
💡 ツタワルの制作では：アニメーションの「意図」を明確にした上で、パフォーマンスへの影響も考慮したモーション設計を行っています。「動き」もブランドの一部として大切に設計します。