【CSS Modules】@starting-styleアットルールの使い方

@starting-styleオブジェクトは、Webページ上の要素がDocument Object Model（DOM）に初めて追加される際や、display: noneの状態から表示状態に変化する際に適用される、その要素の初期スタイルを表すオブジェクトです。通常のCSSトランジションやアニメーションは、要素があるスタイル状態から別の状態へ変化する際に機能します。しかし、要素が新たにDOMに登場する際やdisplayプロパティが非表示から表示へ切り替わる際には、以前の状態が存在しないため、アニメーション効果が適用されませんでした。

この@starting-styleオブジェクトを用いることで、要素が出現する瞬間に適用される「開始状態」を明示的に指定できるようになります。これにより、要素がページに現れるその瞬間から、指定した開始スタイルを経て、通常のCSSトランジションやアニメーションがスムーズに適用されます。例えば、opacity: 0からopacity: 1へフェードインするアニメーションを、要素の出現時に自然に開始させることが可能です。

本オブジェクトは、JavaScriptなどで動的にHTML要素を追加・表示する際に、要素の出現にスムーズで視覚的なアニメーション効果を与え、ユーザーエクスペリエンスを向上させるために役立ちます。本機能はCSS Modulesの文脈で提供され、より洗練されたUI/UXの構築に貢献します。

Copy
1@starting-style {
2  [セレクター] {
3    [プロパティ]: [値];
4    /* ... その他のプロパティと値 */
5  }
6}

引数なし

引数はありません

戻り値なし

戻り値はありません