CSSでdisplay:none;からアニメーションができる！ @starting-styleがすべてのブラウザにサポートされました

Post on:2024年10月1日

はじめに

Four new CSS features for smooth entry and exit animations（当ブログの翻訳記事CSSでスムーズなアニメーションを実現する4つの新しい機能）では、Chromeに実装された便利な機能を紹介しました。

今回は、先日Firefox 129にもサポートされた@starting-style, transition-behavior: allow-discrete;がすべてのブラウザで利用可能になったので紹介しようと思います。

display: none;からのアニメーション化、トップレイヤーへのアニメーション化など、アニメーションさせる要素に対して開始値を設定できるようになりました。

CSSの@starting-styleとは

CSSの@starting-styleはCSSのアットルールで、アニメーションさせる要素に設定されるプロパティの開始値を設定することができます。

@starting-styleルールは、要素がページにレンダリングされる前の要素の初期スタイルを定義します。これはdiplay: none;からアニメーション化する要素に必須となります。これらの要素にはアニメーション化を開始する状態が必要だからです。

@starting-styleの基本構文は、CSSの他のアットルールと同様に、要素のスタイルをその中に記述します。

@starting-style {
  /* 要素のスタイル /*
}

@starting-style {

/* 要素のスタイル /*

}

たとえば、ダイアログがアニメーションで開く前のスタイルは、dialog[open]スタイルを@starting-styleルール内に記述します。これでダイアログが引く前に使用されるスタイルを設定できます。

@starting-style {
  dialog[open] {
    /* ダイアログが開く前のスタイル */
  }
}

@starting-style {

dialog[open] {

/* ダイアログが開く前のスタイル */

}

@starting-styleのサポートブラウザは、下記の通りです。先日リリースされたFirefox 129でもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。

@starting-styleのサポートブラウザ

allow-discreteで離散アニメーションを有効にする

ダイアログやポップオーバーなど、diplay: none;からアニメーションする要素の開始値をサポートするために必要なもう一つは、離散プロパティのアニメーションをサポートする新しいアニメーションモードを有効にすることです。

離散プロパティとは、値の間を補完できないプロパティのことです。オン・オフのスイッチのようなものと考えてください。たとえば、diplay, visibility, mix-blend-modeなど、機能が1つの値あるいは別の値であるプロパティがあります。この新しいアニメーションモードにより、ブラウザはトランジションの0%ポイントではなく、50%ポイントで値を交換できるようになります。

ちなみに、Web Animationsに定義されているアニメーションのプロパティは、4種類あります。

not animatable: アニメーション不可
discrete: 離散的
by computed value: 算出値による
repeatable list: 繰り返し可能なリスト

diplay: none;やvisibility: hidden;の要素の開始エフェクトをアニメーション化するには、次のいずれかを使用します。

allow-discrete値を持つtransition-behaviorプロパティ
allow-discrete値はtransitionのショートハンド

transition-behaviorの適用は、transitionのショートハンドに含まれているので、2番目の方法をお勧めします。もし、transition-behavior: allow-discrete;を設定すると、transition, timing, easing関数を適用するtransitionのショートハンドの前に適用すると、ブラウザはtransition-behaviorは無視してしまいます。

transitionのショートハンドで使用する場合は、個別のアニメーションを必要とする特定のプロパティにのみallow-discreteキーワードを適用します。下記のCSSでは、tranlateプロパティとdiplayプロパティの両方を遷移させていますが、allow-discreteキーワードはdiplayプロパティにのみ設定しています。

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

1	transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

transition-behaviorのサポートブラウザは、下記の通りです。デスクトップ・スマホのすべてのブラウザでサポートされています。

transition-behaviorプロパティのサポートブラウザ

アニメーションさせる要素に対して開始値を設定するデモ

これらの機能は、dialog要素やpopover属性を使用するコンポーネントなどのトップレイヤー要素に対して特に役立ちます。

下記のデモでは、dialog要素がビューポート下部から（最初はスクリーン外の100vhの垂直移動から開始）中央までアニメーション化され、dialog要素が開いているときに移動が取り除かれます。

/* ダイアログが開く前 */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* ダイアログが開いている時 */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

/* ダイアログが開く前 */

@starting-style {

dialog[open] {

translate: 0 100vh;

}

/* ダイアログが開いている時 */

dialog[open] {

translate: 0 0;

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

}

このCSSは、CSSのネストを使用すると、より簡潔に記述できます。

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}