CSSの@starting-style規則を利用したトランジションの実装
Webサイトのデザインに動きを加える時は、CSSのみでも実装できるトランジション処理を要素のスタイルに適応させていきますが、CSSの進化によってトランジションの実装の幅が広がります。
CSS Transitions Level 2よりトランジション関連の新機能が追加され、トランジションの変化前のスタイルの定義として、@starting-style規則が利用できるようになっていきます。
CSS Transitions Level 2
(Defining before-change style: the @starting-style rule)
https://drafts.csswg.org/css-transitions-2/#defining-before-change-style
Webブラウザのサポート状況については、以下のページにて確認できます。
Can I use (CSS at-rule: @starting-style)
https://caniuse.com/mdn-css_at-rules_starting-style
2023年11月現在は、主要ブラウザではGoogle ChromeやMicrosoft Edgeでサポートされています。
今後はSafariやFirefox等もサポートが進むことでしょう。
@starting-style規則を追加することで、トランジションでの変化前のスタイルを適用させることができます。
これまでの通常のスタイルが変化後のスタイルとなります。
複雑な動きを実装するのであれば、animationプロパティや@keyframesで実装していく必要はありますが、transitionプロパティで可能な変化・動作であれば、@starting-style規則は便利に活用できるでしょう。
@starting-style規則の定義
@starting-style規則は、Webページにアクセスした時のトランジション効果を実装することができます。
ファーストビューの表現などで活用できるでしょう。
以下のサンプルでは、見出しタグの背景色とテキスト色を0.5秒かけて変化するように。また動きの加減速（イージング）と動きが始まるまでの待ち時間（1.5秒）を指定しています。
CSS
h1 {
transition: background-color 0.5s ease-in-out 1s, color 0.5s ease-in-out 1s;
background-color: rgba(255, 97, 0, .85);
color: #fff;
text-align: center;
}
@starting-style {
h1 {
background-color: transparent;
color: #333;
}
}
Webページアクセス時はまず、変化前のスタイルとして@starting-style規則のスタイルが適用されます。
そして通常のスタイルで指定したtransitionプロパティによって、背景色とテキスト色が1.5秒後に0.5秒かけて変化します。
また、CSSをネスト（入れ子）で記述する場合は、以下のようになります。
CSS（Nesting）
h1 {
transition: background-color 0.5s ease-in-out 1s, color 0.5s ease-in-out 1s;
background-color: rgba(255, 97, 0, .85);
color: #fff;
text-align: center;
@starting-style {
background-color: transparent;
color: #333;
}
}
@規則はそのまま記述でき、直上の親要素に対する指定となってh1要素の変化前のスタイルとして適用されます。
ネイティブCSSのネスト構造の書き方については、以下の記事でご紹介しています。
以下、サンプルの動作になります。
動画（1分30秒）
まとめ
Webページにアクセスした時にちょっとした動きを実装したい場合には、これまでのCSSのanimationプロパティやJavaScriptを使わずとも、@starting-style規則を定義すればtransitionプロパティで手軽に行えるでしょう。
他にも一緒にtransformプロパティも使って、回転や拡大縮小などの変化も加えると面白い表現ができそうです。
主要ブラウザすべてにサポートされる前に使う場合は、サポートされていないブラウザのデザインやレイアウト崩れなどに影響しない程度に、要素を変化させてコンテンツを見せていくといいでしょう。
