# @starting-style

> 要素が最初に表示された瞬間の「開始スタイル」を定義するアットルールです。display: noneからの表示やDOM追加直後の要素に、JavaScriptなしでフェードインなどの出現アニメーションを付けられます。transition-behavior: allow-discreteとの併用が定番です。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/at-starting-style/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/@starting-style

## 構文

```css
@starting-style { <declarations> } / 要素側: transition-behavior: allow-discrete
```

## ブラウザ対応

- Baseline 新しく利用可能（2024年8月に全主要ブラウザ対応）
- Chrome 117+ / Firefox 129+ / Safari 17.5+ / Edge 117+

## コード例

### 例1: ダイアログの開閉両方向をCSSだけでフェード

```css
dialog[open] {
  opacity: 1;
  transition: opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;

  @starting-style {
    opacity: 0;
  }
}

dialog {
  opacity: 0;
}
```

### 例2: DOMに追加されたトースト通知が下からフェードイン

```css
.toast {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s, translate 0.3s;

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

## TIPS

display: noneからのtransitionにはtransition-behavior: allow-discrete（transitionショートハンドではallow-discreteキーワード）が必要です。popover/dialogの出現・消滅アニメーションはこの組み合わせ＋overlayプロパティで完全にCSS化できます。

## よくある間違い

@starting-styleは「表示された瞬間」の起点なので、消えるとき（表示→非表示）のアニメーションには効きません。消える方向は通常のtransition＋allow-discreteで実装します。またキャッシュされた再表示など、レンダリング済み要素には適用されません。

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

AIは「display: noneからフェードイン」の要望にJavaScript（クラス付替え+requestAnimationFrame）やkeyframesハックを提案しがちですが、2024年以降は@starting-style + transition-behavior: allow-discreteでCSSのみで実装できます。AIの生成コードでallow-discreteが抜けてdisplayが補間されず動かない、というのが最頻の失敗パターンです。

## AIへの依頼文例

- popover要素の出現・消滅に@starting-styleとallow-discreteを使ったフェードアニメーションを付けて。JSは使わない
- JSでクラスを付け替えてフェードインしているこのコードを、@starting-styleベースのCSSだけの実装に書き換えて

## 関連プロパティ

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