# animation

> キーフレームアニメーションを制御するプロパティです。@keyframesで定義したアニメーション名、持続時間、タイミング関数、遅延、繰り返し回数、方向などを指定し、複雑なアニメーションを実現できます。

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

## 構文

```css
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
```

## Tailwindでは

- `animate-spin` → animation: spin 1s linear infinite
- `animate-pulse` → animation: pulse 2s ... infinite
- `animate-bounce` → animation: bounce 1s infinite
- `animate-none` → animation: none
- 任意値: `animate-[wiggle_1s_ease-in-out_infinite]`
- 補足: motion-reduce:animate-none の併記を推奨（prefers-reduced-motionの項を参照）。

## ブラウザ対応

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

## コード例

### 例1: フェードインアニメーション - 最もよく使われる基本的なアニメーション

```css
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
```

### 例2: 左からスライドイン - カスタムイージング関数を使用

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

.slide-in {
  animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
```

### 例3: バウンスアニメーション - 無限ループで注意を引く効果

```css
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}
```

### 例4: 脈動するボタン - スケールと影を組み合わせた注目効果

```css
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.pulse-button {
  animation: pulse 2s infinite;
}
```

### 例5: 回転アニメーション - ローディングスピナーに最適

```css
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  animation: rotate 1s linear infinite;
}
```

### 例6: シェイクアニメーション - エラー時のフィードバックに使用

```css
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.error-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
```

### 例7: 浮遊アニメーション - 遅延とfill-modeを活用

```css
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.floating-element {
  animation: float 3s ease-in-out infinite;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}
```

### 例8: 3Dフリップイン - perspectiveを使った立体的なアニメーション

```css
@keyframes flipIn {
  0% {
    transform: perspective(400px) rotateY(-90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flip-in {
  animation: flipIn 0.6s ease-in-out;
}
```

### 例9: 複数アニメーションの同時実行 - カンマ区切りで複数指定

```css
.multi-animation {
  animation: 
    fadeIn 0.5s ease-out,
    slideInFromLeft 0.5s ease-out,
    pulse 2s infinite 0.5s;
}
```

## TIPS

transitionより複雑なアニメーションが可能。transform、opacity、filter以外のプロパティはパフォーマンスに影響するため注意。will-changeと組み合わせて最適化。animation-fill-modeでアニメーション前後の状態を制御。複数アニメーションはカンマ区切りで指定可能。

## よくある間違い

width、height、left、topなどのレイアウトプロパティをアニメーションするとパフォーマンスが悪化。animation-fill-mode: forwardsを忘れるとアニメーション後に元の状態に戻る。キーフレーム名の重複に注意。無限アニメーションの多用はバッテリー消費を増加させる。

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

animationショートハンドの値の順序（最初の時間がduration、2つ目がdelay）はAIも間違えます。またprefers-reduced-motion（視差効果を減らす設定）への配慮をAIは省略しがちなので、アニメーション実装時は必ずセットで要求してください。

## AIへの依頼文例

- このループアニメーションにprefers-reduced-motion対応を追加して、動きに敏感なユーザーに配慮して
- animationショートハンドのdurationとdelayの指定が正しいか確認して

## 関連プロパティ

- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [will-change](https://www.css-dictionary.com/property/will-change.md)
- [at-starting-style](https://www.css-dictionary.com/property/at-starting-style.md)
- [animation-timeline](https://www.css-dictionary.com/property/animation-timeline.md)
- [view-transition-name](https://www.css-dictionary.com/property/view-transition-name.md)