# DOM追加時のフェードイン（@starting-style）のCSSアニメーション実装

> JavaScriptなしで「要素が追加された瞬間」にアニメーションする最新手法。トースト通知や動的リストの定番になりつつあります。

- カテゴリ: 出現・入場
- URL: https://www.css-dictionary.com/animations/entry-starting-style/

## HTML

```html
<div class="toast">保存しました ✓</div>
<p class="note">このプレビューを再読込（リセット）すると出現時の動きが見えます</p>
```

## CSS

```css
.toast {
  width: fit-content;
  padding: 12px 20px;
  background: #2b4233;
  color: #fff;
  border-radius: 8px;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.5s ease;

  @starting-style {
    opacity: 0;
    translate: 0 16px;
  }
}

.note {
  font-size: 12px;
  color: #7d7159;
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}
```

## 仕組みの解説

@starting-styleは「要素が最初にレンダリングされる瞬間のスタイル」を定義するアットルールです。通常のtransitionは状態変化がないと動きませんが、これによりDOM追加直後（=初回描画）を起点にした遷移が可能になります。従来はJSでクラスを1フレーム後に付け替えるハックが必要だった処理が、CSSだけで完結します。

## 実装のポイント

display: noneからの表示に使う場合はtransition-behavior: allow-discreteの併用が必要です。詳細は@starting-styleのページを参照してください。

## 使っているプロパティ

- [at-starting-style](https://www.css-dictionary.com/property/at-starting-style.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [transform](https://www.css-dictionary.com/property/transform.md)