キーフレームアニメーション
@keyframesanimationanimation-fill-modeanimation-timeline
@keyframesを使うと、複数のステップにわたる複雑なアニメーションを定義できます。トランジションと違い、ホバーなどのトリガーなしに自動的に動作させることができます。
デモ：様々なアニメーション
spin（ローディング）
pulse（注意喚起）
bounce（バウンス）
fadeInUp
fadeInUp（出現）shimmer（スケルトン）
colorCycle（色循環）
タイピング:
Hello, CSS Animation!
デモ：animation-fill-mode の比較
各ボックスは左からスライドインするアニメーション（0.5秒 delay + 1秒）。fill-modeによって「アニメーション前後」の状態が変わります。
none
none: 前後とも元の状態forwards
forwards: 終了後も最後の状態を維持backwards
backwards: delay中も最初の状態を適用both
both: forwards + backwards の両方コード例
/* @keyframes の定義 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* パーセンテージで複数ステップ */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
/* animation shorthand */
/* name | duration | timing-function | delay | iteration-count | direction | fill-mode */
.element {
animation: fadeInUp 0.6s ease-out 0s 1 normal forwards;
}
/* プロパティを個別に指定 */
.element {
animation-name: fadeInUp;
animation-duration: 0.6s;
animation-timing-function: ease-out;
animation-delay: 0.2s;
animation-iteration-count: 1; /* infinite で無限ループ */
animation-direction: normal; /* reverse, alternate, alternate-reverse */
animation-fill-mode: forwards; /* none, forwards, backwards, both */
animation-play-state: running; /* paused で一時停止 */
}
/* 複数アニメーションをカンマ区切りで */
.loader {
animation:
spin 1s linear infinite,
pulse 2s ease-in-out infinite;
}比較：CSS アニメーション vs JavaScript アニメーション
| 観点 | CSS アニメーション | JS アニメーション |
|---|---|---|
| パフォーマンス | ✅ GPU合成層で高速（transform/opacity） | ⚠️ JS実行コストあり（Web Animationsは高速） |
| シンプルさ | ✅ 宣言的でシンプル | ❌ コードが複雑になりがち |
| 動的制御 | ❌ JS連動が難しい | ✅ 完全にプログラム制御可能 |
| タイミング制御 | ⚠️ 基本的なもののみ | ✅ requestAnimationFrameで細かく制御 |
| 物理シミュレーション | ❌ 不可能 | ✅ スプリング・摩擦など |
| 中断・巻き戻し | ⚠️ 限定的 | ✅ 自由に制御可能 |
| ブラウザ最適化 | ✅ ブラウザが最適化 | ⚠️ Web Animations APIなら最適化される |
推奨: シンプルなUIアニメーションはCSS、インタラクティブ・物理ベースはJS (GSAP等) を使い分けましょう
NEW@property と スクロール駆動アニメーション（2023）
① @property — カスタムプロパティをアニメーション可能に（CSS Houdini）
通常のCSS変数はアニメーションできませんが、@property で型を宣言することでアニメーション可能になります。グラデーションのアニメーションなどに強力です。
/* @property でカスタムプロパティに型を付与 (Chrome 85+, Firefox 128+) */
@property --hue {
syntax: "<number>"; /* 型を指定 */
initial-value: 0;
inherits: false;
}
.rainbow-btn {
background: hsl(var(--hue) 80% 60%);
transition: --hue 0.5s ease; /* これでカスタムプロパティをトランジション可能！ */
}
.rainbow-btn:hover {
--hue: 300;
}
/* @keyframes でもカスタムプロパティをアニメーション */
@keyframes hueRotate {
from { --hue: 0; }
to { --hue: 360; }
}
.animated { animation: hueRotate 3s linear infinite; }② スクロール駆動アニメーション（Chrome 115+, 2023）
JSなしで、スクロール位置に連動したアニメーションが実現できます。読書プログレスバーや要素の出現アニメーションに最適です。
/* スクロールプログレスバー */
@keyframes progressBar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar {
position: fixed; top: 0; left: 0;
width: 100%; height: 4px;
background: #6366f1;
transform-origin: left;
/* animation-timeline でスクロール位置に連動 */
animation: progressBar linear;
animation-timeline: scroll(); /* ページ全体のスクロール */
animation-range: 0% 100%;
}
/* 要素がビューポートに入ったらフェードイン */
@keyframes fadeInOnScroll {
entry 0% { opacity: 0; transform: translateY(30px); }
entry 100% { opacity: 1; transform: translateY(0); }
}
.reveal-on-scroll {
animation: fadeInOnScroll linear both;
animation-timeline: view(); /* この要素のビューポート内位置に連動 */
animation-range: entry 0% entry 50%;
}scroll-driven animations: Chrome 115+, Firefox 実験的, Safari 未対応（2024時点）。@property: Chrome 85+, Firefox 128+
🤖 AIプロンプトテンプレート
CSSの@keyframesアニメーションを使った実装例をReact + Tailwind CSSで作成してください。 要件: - spin / pulse / bounce / fadeInUp / shimmer など代表的なアニメーションのデモ - animation-fill-mode（none / forwards / backwards / both）の違いを視覚的に比較するデモ - animation-play-stateを使って再生・一時停止を切り替えられるインタラクティブUI - タイピングアニメーション（steps()関数を使用）の実装 - 複数アニメーションをカンマ区切りで重ねる実例 - prefers-reduced-motionに対応したアクセシブルな実装パターン
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。