このページは Cloud Translation API によって翻訳されました。

スムーズな開始と終了のアニメーションを実現する 4 つの新しい CSS 機能

Una Kravets

Joey Arhar

モーションとは、ユーザーを次のインタラクションに誘導する、デジタルエクスペリエンスの中核となる要素です。ただし、ウェブプラットフォームではスムーズなアニメーションにいくつかのギャップがあります。たとえば、開始と終了のアニメーションを簡単にアニメーション化したり、ダイアログやポップオーバーなどの閉じられる要素のトップレイヤとの間でスムーズにアニメーション化したりできます。

これらのギャップを埋めるために、Chrome 116 と 117 には、個別のプロパティの滑らかなアニメーションと遷移を可能にする 4 つの新しいウェブプラットフォーム機能が含まれています。

新機能は次の 4 つです。

キーフレームタイムラインで display と content-visibility をアニメーション化できるようになりました（Chrome 116 以降）。
transition-behavior プロパティと allow-discrete キーワードを使用して、display などの離散プロパティの遷移を有効にします（Chrome 117 以降）。
display: none からトップレイヤへの開始効果をアニメーション化する @starting-style ルール（Chrome 117 以降）。
アニメーション中の最上位レイヤの動作を制御する overlay プロパティ（Chrome 117 以降）。

キーフレームにアニメーションを表示する

Chrome 116 以降では、キーフレームルールで display と content-visibility を使用できます。キーフレームが実行されると、これらのフレームが入れ替わります。これをサポートするために追加の新しい値は必要ありません。

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

注: その他の離散プロパティは、遷移の減衰関数の 50% の時点で状態を切り替えます。ただし、display と content-visibility は、遷移の開始時（インアニメーションの場合）または遷移の終了時（アウトアニメーションの場合）に切り替わります。

上記の例では、持続時間 0.5 秒で不透明度を 0 にアニメーション化してから、display を none に設定します。また、forwards キーワードを使用すると、アニメーションが終了状態のままになるため、適用先の要素は display: none と opacity: 0 のままになります。

これは、遷移でできることを模倣した簡単な例です（遷移セクションのデモをご覧ください）。ただし、次のような複雑なアニメーションは作成できません。

.card {
  animation: spin-and-delete 1s ease-in forwards;
}

@keyframes spin-and-delete {
  0% {
    transform: rotateY(0);
    filter: hue-rotate(0);
  }
  80% {
    transform: rotateY(360deg);
    filter: hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

spin-and-delete アニメーションは終了アニメーションです。まず、カードが y 軸で回転し、色相が回転します。その後、タイムラインの 80% で、不透明度が 1 から 0 に変化します。最後に、カードが display: block から display: none に切り替わります。

これらの終了アニメーションは、要素に直接適用するのではなく、アニメーションのトリガーを設定できます。たとえば、次のように、クラスによるアニメーションの適用をトリガーするボタンにイベントリスナーをアタッチします。

.spin-out {
   animation: spin-and-delete 1s ease-in forwards;
}

document.querySelector('.delete-btn').addEventListener('click', () => {
 document.querySelector('.card').classList.add('spin-out');
})

上記の例では、終了状態が display:none になりました。多くの場合、アニメーションを先に終了させるために、タイムアウトを設定して DOM ノードを削除する必要があります。

個別のアニメーションの遷移

キーフレームで離散プロパティをアニメーション化するときとは異なり、離散プロパティを遷移するには、allow-discrete 遷移動作モードを使用する必要があります。

`transition-behavior` プロパティ

allow-discrete モードは離散的な遷移を可能にします。これは transition-behavior プロパティの値です。transition-behavior には、normal と allow-discrete の 2 つの値を指定できます。

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

注: 遷移の省略形を使用している場合は、省略形の後に transition-behavior を使用して、特定性に基づいて適用されるようにしてください。

注: この移行デモでは、最初のアニメーションデモとは異なる手法が使用されていますが、見た目は類似しています。

transition 省略形もこの値を設定するため、プロパティを省略して、代わりに各遷移の transition 省略形の最後に allow-discrete キーワードを使用できます。

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

複数の個別のプロパティをアニメーション化する場合は、アニメーション化するプロパティの後に allow-discrete を含める必要があります。例:

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

注: ヒント: * {transition-behavior: allow-discrete} を使用して個別のアニメーションをいつでもオンにできますが、transition ショートカットとの詳細度の競合を防ぐため、CSS の末尾に配置してください。

エントリアニメーションの `@starting-style` ルール

この記事ではここまで終了アニメーションについて説明してきましたが、開始アニメーションを作成するには @starting-style ルールを使用する必要があります。

@starting-style を使用すると、ページ上で要素が開く前にブラウザが検索できるスタイルを適用できます。これは「開く前」の状態（アニメーションの開始位置）です。

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

これで、これらの TODO リスト項目の開始状態と終了状態の両方が設定されました。

Codepen の web-dot-dev による Pen xxQvWLW をご覧ください。

最上位レイヤとの間で要素をアニメーション化する

最上位レイヤとの間で要素をアニメーション化するには、@starting-style を「オープン」状態で指定し、ブラウザに対してどこからアニメーション化するかを指示します。ダイアログの場合、開いている状態は [open] 属性で定義されます。ポップオーバーの場合は、:popover-open 疑似クラスを使用します。

ダイアログの簡単な例を次に示します。

/*   0. IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   1. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

/*   2. EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

次の例では、開始効果と終了効果が異なります。ビューポートの下部から上にアニメーション化して開始し、ビューポートの上部で効果を終了します。また、視覚的なカプセル化を強化するために、ネストされた CSS で記述されています。

ポップオーバーをアニメーション化する場合は、以前に使用した open 属性の代わりに :popover-open 疑似クラスを使用します。

.settings-popover {
  &:popover-open {
    /*  0. IS-OPEN STATE  */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;

    /*  1. BEFORE-OPEN STATE  */
    /*  Initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  /*  2. EXIT STATE  */
  /*  Initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateY(-50px);
  opacity: 0;
  
  /*  Enumerate transitioning properties, 
      including display and allow-discrete mode */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

`overlay` 件の宿泊施設

最後に、上位レイヤから popover または dialog をフェードアウトするには、遷移のリストに overlay プロパティを追加します。popover と dialog は、祖先のクリップと変換をエスケープし、コンテンツを最上位レイヤに配置します。overlay を遷移しないと、要素はすぐにクリップ、変形、覆い隠し状態に戻り、遷移は表示されません。

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

代わりに、遷移またはアニメーションに overlay を含めて、他の機能とともに overlay をアニメーション化し、アニメーション化時に最上位レイヤに維持するようにします。これで、よりスムーズに表示されます。

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

また、最上位のレイヤで複数の要素を開いている場合、オーバーレイを使用すると、最上層のレイヤを出入りする際のスムーズな遷移をコントロールできます。違いはこの簡単な例で確認できます。2 番目のポップオーバーを閉じるときに overlay を適用していない場合、そのポップオーバーは、まず最上位レイヤから移動し、他のポップオーバーの後ろに移動してから、遷移を開始します。これはあまりスムーズな効果ではありません。

ビュー遷移に関する注意事項

DOM の要素を追加または削除するなど、DOM を変更する場合は、スムーズなアニメーションを実現するためのもう 1 つのソリューションとしてビュー遷移があります。ビュー遷移を使用して作成された上記の例を 2 つ紹介します。

この最初のデモでは、@starting-style などの CSS 変換を設定する代わりに、ビュー遷移が遷移を処理します。ビューの遷移は次のように設定します。

まず、CSS で各カードに個別の view-transition-name を指定します。

.card-1 {
  view-transition-name: card-1;
}

.card-2 {
  view-transition-name: card-2;
}

/* etc. */

次に、JavaScript で DOM 変更（この場合はカードの削除）をビュー遷移でラップします。

deleteBtn.addEventListener('click', () => {
  // Check for browser support
  if (document.startViewTransition) {
    document.startViewTransition(() => {
      // DOM mutation
      card.remove();
    });
  } 
  // Alternative if no browser support
  else {
    card.remove();
  }
})

これで、ブラウザは各カードのフェードアウトと、新しい位置へのモーフィングを処理できるようになりました。

リストアイテムの追加 / 削除のデモも、この機能が役立つ例です。この場合、作成するカードごとに一意の view-transition-name を追加する必要があります。

まとめ

これらの新しいプラットフォーム機能により、ウェブプラットフォームでのスムーズなエントリアニメーションと終了アニメーションに一歩近づきました。詳しくは、以下のリンクをご覧ください。

スムーズな開始と終了のアニメーションを実現する 4 つの新しい CSS 機能

キーフレームにアニメーションを表示する

個別のアニメーションの遷移

transition-behavior プロパティ

エントリ アニメーションの @starting-style ルール

最上位レイヤとの間で要素をアニメーション化する

overlay 件の宿泊施設

ビュー遷移に関する注意事項

まとめ

`transition-behavior` プロパティ

エントリアニメーションの `@starting-style` ルール

`overlay` 件の宿泊施設