CSS トランジションの開始時のスタイルを定義する `@starting-style` ルール

これまでCSSトランジションでは、`display: none`や`content-visibility: hidden`などによって要素が非表示から表示状態に変わる際、要素の初期スタイルが定義されておらず、アニメーションが開始される前に一瞬デフォルトの位置にジャンプしてしまう問題がありました。`@starting-style`ルールは、要素が表示される直前の「開始スタイル」を明示的に定義することで、この問題が解消され、より自然で洗練されたUIアニメーションが可能になります。これにより、ユーザー体験が向上し、開発者はより制御されたトランジションを実装できます。

• •`@starting-style`は、`display: none`などから表示状態に変わる要素のトランジション開始時のスタイルを定義します。
• •これまでのトランジションで発生していた、アニメーション開始前の要素の「ジャンプ」現象を解消します。
• •CSSトランジションと組み合わせて使用することで、よりスムーズで意図通りのアニメーションを実現し、ユーザー体験を向上させます。