トランジションさせる要素の初期状態を指定する@starting-style

@starting-styleを使うと、トランジション開始時のスタイルを定義できる。

@starting-styleはトランジションのみで、CSSアニメーションはいままで通り@keyframes + animationを使う。

• ※2024-07-21現在、Chrome117、Edge117、Safari17.5で利用可能。
• FirefoxはExperimentalとして実装されており、flagを有効にすることで使える

.target {
  transition: background-color: 1.5s;
  /* トランジション後のスタイル */
  background-color: green;
}

@starting-style {
  .target {
    /* トランジション前のスタイル（初期表示時のスタイル） */
    background-color: transparent;
  }
}

追記: 2024-08-08

Firefox129で@starting-styleがサポートされたことで、全主要ブラウザで利用可能になった。