@starting-style で popover を display:none からフェードイン
@starting-style で「表示直前の初期値」を与えると、JSなしで popover を開くときにトランジションが効く。
どんな時に使う？
popover や dialog は閉じている間 display: none なので、開いた瞬間には「アニメーション開始時の値」が存在せず、transition が発火しない。@starting-style で開始値を宣言すると、開くときにそこから通常値へ遷移する。
コード
css
.menu {
transition: opacity 0.3s, translate 0.3s;
}
@starting-style {
.menu:popover-open {
opacity: 0;
translate: 0 -8px;
}
}- 閉じるときもアニメーションさせたい場合は、
transitionにdisplay 0.3s allow-discrete, overlay 0.3s allow-discreteを追加し、閉状態のスタイル（opacity: 0など）も定義する。
注意点・対応状況
@starting-styleは主要ブラウザで対応済み（比較的新しい）。allow-discreteによる閉じアニメーションの対応はブラウザ差があるので確認する。