CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
...
coliss.com
@starting-styleルールを使用すると、CSSのトランジションで変化する前のスタイルを適用することができます。
CSSのトランジションは要素の最初のスタイル更新時、またはdisplayタイプがnoneから他に変更された時に、初期スタイルからのトランジションをトリガーできませんでした。これは初期スタイルからの予期せぬ遷移を避けるためです。
トランジションで変化する前のスタイルを適用するには、@starting-styleルール内でスタイルを設定します。
たとえば、下記のCSSはdivの背景をライムグリーンにトランジションするCSSで、変化する前のスタイルを@starting-style内に設定します。
/* 背景色がグリーンからライムに変化 */
div {
transition: background-color 0.5s;
background-color: lime;
}
@starting-style {
div {
background-color: green;
}
}