ベースラインに追加: 入口効果のアニメーション化

Una Kravets

この投稿では、開始効果と終了効果に関する 4 つの新しい CSS 機能で、Chrome に導入されたばかりの便利な機能を紹介しています。現在、これらの機能のうち @starting-style と transition-behavior: allow-discrete の 2 つが、Firefox 129 のリリースで新たに利用可能になりました。display: none からアニメーション化するものや最上位のレイヤにアニメーション化するものなど、要素のエントリ アニメーション効果を作成できるようになりました。

@starting-style を使用してエントリ エフェクトを設定する

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 129。 <ph type="x-smartling-placeholder">
  • Safari: 17.5。 <ph type="x-smartling-placeholder">

ソース

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

CSS の他のアットルールと同様に、要素のスタイルをその中に入れて @starting-style を使用します。たとえば <dialog> では、@starting-style ルール内に dialog[open] スタイルを配置します。ダイアログが開く前に使用されるスタイルです。

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

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

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 129。 <ph type="x-smartling-placeholder">
  • Safari: 17.4。 <ph type="x-smartling-placeholder">

ソース

ダイアログやポップオーバーなど、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 ネストを使用して、より簡潔に記述できます。

対応ブラウザ

  • Chrome: 120。 <ph type="x-smartling-placeholder">
  • Edge: 120。 <ph type="x-smartling-placeholder">
  • Firefox: 117。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

ソース

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

  @starting-style {
    translate: 0 100vh;
  }
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">で確認できます。
ダイアログ要素でのアニメーションのデモ。

まとめ

Baseline の分野でこのような進歩が実現するのは大変喜ばしいことです。少なくとも、こうした要素の進化が順調に進んでいます。これらのエントリ効果機能を使用しない場合、最上位レイヤまたは display: none スタイルからアニメーション化する要素は、現在と同様に、遷移なしでページ上に表示されます。