# @keyframes

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

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/keyframes/

## 構文

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

## Tailwindでは

- 一般形: `@theme { --animate-{name}: ...; @keyframes {name} { ... } } で登録`
- 補足: キーフレーム自体のユーティリティは無い。v4ではCSSの@theme内に定義すると animate-{name} が自動生成される。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 43+ / Firefox 16+ / Safari 9+ / Edge 12+

## コード例

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

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

### 例2: 脈動するアニメーション

```css
@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を現代的な書き方に整理して

## 関連プロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [animation-timeline](https://www.css-dictionary.com/property/animation-timeline.md)