@starting-styleを使ってみる

CSSの@starting-styleの設定について試してみます。

@starting-styleについて

@starting-styleはtransitionの開始値を指定できるアットルールです。
この設定は対象要素の初期スタイル更新時(DOMに要素が追加された時など)や、displayがnoneから別の値に変更された時のみ適用されます。

主要なブラウザで対応していますが、Firefoxではdisplay: none; からアニメーションすることができないようです。(ただForefoxのバージョン133で確認した限り、display: none;からのアニメーションはされていそうでした。)

例として、DOMに要素が追加された時のアニメーションを設定してみます。

<button id="add">要素を追加</button>

ボタンをクリックすると、.sampleの要素が追加されるようにします。

document.getElementById('add').addEventListener('click', function() {
  const addElement = document.createElement('div');
  addElement.classList.add('sample');
  document.body.appendChild(addElement);
});

追加される.sampleの要素に対して、@starting-styleでtransitionの開始値を設定してみます。

.sample {
  opacity: 1;
  transition: opacity 1000ms;
}

@starting-style {
  .sample {
    opacity: 0;
  }
}

これで要素を追加した際にアニメーションされるようになりました。
要素を追加する場合の@starting-styleのデモページ

前述の例では@starting-styleを独立したブロックとして記述しましたが、入れ子の記述もできます。

.sample {
  opacity: 1;
  transition: opacity 1000ms;

  @starting-style {
    opacity: 0;
  }
}

この場合でも同様の動作になりました。
要素を追加する場合の@starting-styleのデモページ2

次の例として、display: none;の要素のアニメーションを試してみます。

<div class="pulldown">
  <div class="pulldown_head">ホバーで表示</div>
  <div class="pulldown_body">コンテンツ内容</div>
</div>

.pulldown_bodyに対してdisplay: none;を設定して、.pulldownをホバー時にdisplay: block;に変更とアニメーションを設定してみます。

.pulldown_body {
  display: none;
  opacity: 0;
  transition: opacity 1000ms;
}
.pulldown:hover .pulldown_body {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

これでdisplay: none;の要素に対するアニメーションが設定できました。
display: none;の場合の@starting-styleのデモページ

上記の例だとホバーを外した際(display: none;になる際)にフェードアウトのアニメーションがされませんが、以下のように指定するとアニメーションするようになります。

.pulldown_body {
  display: none;
  opacity: 0;
  transition:
    opacity 1000ms,
    display 1000ms allow-discrete;
}
.pulldown:hover .pulldown_body {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

これでホバーを外した時(display: none;になる際)にもフェードアウトのアニメーションがされるようになりました。(ただしFirefoxでは対応していないようです)
display: none;の場合の@starting-styleのデモページ2

上記の設定はtransition-behaviorプロパティで、値にallow-descreteを設定することでdisplayやoverlayなどのようなプロパティをtransition可能にするかを指定できます。
@starting-styleを使わない形で設定して、transition-behavior: allow-descrete;の動作を試してみます。

.pulldown_body {
  display: none;
  opacity: 0;
  transition:
    opacity 1000ms,
    display 1000ms allow-discrete;
}
.pulldown:hover .pulldown_body {
  display: block;
  opacity: 1;
}

この場合、@starting-styleを外したのでdisplayがnoneからblockに変わる際はアニメーションされませんが、blockからnoneに変わる際はアニメーションされます。
ただこの場合も、Firefoxでは対応していないようでした。
transition-behavior: allow-descrete;のデモページ

前述の通り@starting-styleは、対象要素の初期スタイル更新時やdisplay: none;からの変更時のみ適用されるので、すでにレンダリングされている要素に対しては適用されません。
実際に設定をして確認してみます。

<div class="sample">ホバーで実行</div>

.sampleにホバーすると背景色が青色になるアニメーションで、@starting-styleで開始値を赤色としてみます。

.sample {
  transition: background-color 1000ms;
}
.sample:hover {
  background-color: blue;

  @starting-style {
    background-color: red;
  }
}

この場合は@starting-styleは適用されず、透明から青色のアニメーションとなります。
@starting-styleが適用されないデモページ

最後にdialog要素に対するアニメーションを設定してみます。

<button id="open-btn">dialogを開く</button>

<dialog id="dialog">
  <p>dialogの内容</p>
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>

#open-btnのクリックでdialogを開くようにします。

document.getElementById('open-btn').addEventListener('click', function() {
  document.getElementById('dialog').showModal();
});

最後にアニメーションの設定で、@starting-styleと合わせてtransition-behavior: allow-discrete;の設定も行い、閉じる際もアニメーションされるようにします。

dialog {
  opacity: 0;
  transition:
    opacity 1000ms,
    overlay 1000ms allow-discrete,
    display 1000ms allow-discrete;
}
dialog[open] {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}
dialog::backdrop {
  opacity: 0;
  transition:
    opacity 1000ms;
}
dialog[open]::backdrop {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

これでdialogの開閉時にアニメーションするようになりましたが、transition-behavior: allow-descrete;のデモで試した時と同様にFirefoxでは閉じる際のアニメーションが対応していません。
dialogのデモページ