この投稿では、開始効果と終了効果に関する 4 つの新しい CSS 機能で、Chrome に導入されたばかりの便利な機能を紹介しています。現在、これらの機能のうち @starting-style と transition-behavior: allow-discrete の 2 つが、Firefox 129 のリリースで新たに利用可能になりました。display: none からアニメーション化するものや最上位のレイヤにアニメーション化するものなど、要素のエントリ アニメーション効果を作成できるようになりました。
@starting-style を使用してエントリ エフェクトを設定する
@starting-style ルールは、ページにレンダリングされる前の要素の初期スタイルを定義します。これは、display: none からアニメーション化する要素の場合、アニメーション化する状態を必要とするため、必須です。
CSS の他のアットルールと同様に、要素のスタイルをその中に入れて @starting-style を使用します。たとえば <dialog> では、@starting-style ルール内に dialog[open] スタイルを配置します。ダイアログが開く前に使用されるスタイルです。
@starting-style {
dialog[open] {
/* Styles before the dialog opens */
}
}
allow-discrete で離散アニメーションを有効にする
ダイアログやポップオーバーなど、display: none からアニメーション化する要素のエントリ アニメーションをサポートするには、新しいアニメーション モードを有効にして、離散プロパティのアニメーションをサポートする必要があります。離散プロパティとは、値間で補間できないプロパティです。スイッチはオン/オフのスイッチのようなものです。たとえば、display、visibility、mix-blend-mode などのように、特徴がなんらかの値を持つプロパティなどです。この新しいアニメーション モードでは、ブラウザが遷移の 0% のポイントではなく 50% のポイントで値の入れ替えをサポートするようになりました。
display: none 要素と visibility: hidden 要素の入口効果をアニメーション化するには、次のいずれかの方法を使用します。
- 値が
allow-discreteのスタンドアロン プロパティtransition-behavior。 - 遷移の省略形の
allow-discrete値。
transition-behavior の適用は transition の省略形に含まれているため、2 番目の方法をおすすめします。遷移、タイミング、イージングの各関数を適用する遷移省略形の前に transition-behavior: allow-discrete を適用すると、ブラウザは transition-behavior を無視します。
これを省略形で使用する場合は、個別のアニメーションを必要とする特定のプロパティに allow-discrete キーワードを適用するだけで済みます。次の CSS では、translate プロパティと display プロパティの両方を移行していますが、display プロパティには allow-discrete キーワードしか適用されていません。
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
デモ: すべてをまとめる
これらの機能の使用は、<dialog> 要素や popover 属性を使用するコンポーネントなどの最上位レイヤ要素で特に役立ちます。次の例では、<dialog> 要素がビューポートの下部（最初は画面外での 100 vh の垂直移動から開始）からビューポートの中心までアニメーション化され、<dialog> が開いているときに変換が削除されます。
/* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
これは、同じく Baseline の新しく利用可能になった機能でもある CSS ネストを使用して、より簡潔に記述できます。
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
@starting-style {
translate: 0 100vh;
}
}
まとめ
Baseline の分野でこのような進歩が実現するのは大変喜ばしいことです。少なくとも、こうした要素の進化が順調に進んでいます。これらのエントリ効果機能を使用しない場合、最上位レイヤまたは display: none スタイルからアニメーション化する要素は、現在と同様に、遷移なしでページ上に表示されます。