@keyframes

アニメーション・エフェクト

アニメーションの各段階を定義するルールです。@keyframes名前 { from { } to { } }または0%から100%のパーセンテージでアニメーションの途中状態を細かく指定できます。複雑で滑らかなアニメーションを実現するための基礎です。

構文

Syntax

@keyframes <name> { <keyframe-selector> { <declarations> } }

Tailwindでは

一般形: @theme { --animate-{name}: ...; @keyframes {name} { ... } } で登録

キーフレーム自体のユーティリティは無い。v4ではCSSの@theme内に定義すると animate-{name} が自動生成される。

コード例

例 1

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

実行結果

左からスライドイン

左からスライドインするアニメーション

例 2

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

実行結果

脈動アニメーション

脈動するアニメーション

💡 TIPS

fromとtoは0%と100%の省略形。複数のプロパティを同時にアニメーション可能。

🤖 AIがよく間違えるポイント

AIは今でも-webkit-プレフィックス付きの@keyframesを出すことがありますが、現在は不要です。また同名の@keyframesは後の定義が完全に上書きします（マージされない）。0%/100%とfrom/toは同義で、複数セレクタ（0%, 50% { ... }）でキーフレームをまとめられます。

💬 AIへの頼み方

この古いプレフィックス付きkeyframesを現代的な書き方に整理して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

ブラウザサポート

Baseline 広く利用可能

Chrome

43+

Firefox

16+

Safari

Edge

12+