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

今年もCSSの進化が止まりません!
先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。

今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。

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

Four new CSS features for smooth entry and exit animations
by Una Kravets, Joey Arhar

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに

モーション、サイトやアプリ上の動きはユーザーをあるインタラクションから次のインタラクションへと導くあらゆるデジタルエクスペリエンスの核となる部分です。しかし、現在のWeb上ではアニメーションに少しギャップがあります。たとえば、開始と終了のアニメーションを簡単にアニメーション化したり、ダイアログやポップオーバーなど閉じることができる要素と最上位レイヤーとの間でスムーズなアニメーション化したりする機能です。

それらのギャップをなくすために、Chrome 116および117ではCSSの4つの新しい機能が実装され、個別のプロパティに対してスムーズなアニメーションとトランジションが可能となります。

4つの新しい機能は、下記の通りです。

  • キーフレームのタイムラインでdisplaycontent-visibilityをアニメーション化する機能(Chrome 116より)。
  • allow-discreteキーワードを含むtransition-behaviorプロパティで、displayなど個別プロパティのトランジションを可能にする機能(Chrome 117より)。
  • 開始のエフェクトをdisplay: none;から最上位レイヤーにアニメーション化する@starting-styleルール(Chrome 117より)。
  • アニメーション中の最上位レイヤーの動作を制御するoverlayプロパティ(Chrome 117より)。

displayプロパティをアニメーションさせるのは、以前の記事をご覧ください。

デモのアニメーション

CSSのこの新機能、すごく楽しみ! UI要素にさまざまなアニメーションを簡単に実装できるようになります

displayをキーフレームでアニメーションさせる

2023年7月にリリースされたChrome 116から、キーフレームでdisplaycontent-visibilityを使用できるようになりました。キーフレームが発生すると、これらの値が入れ替わります。これをサポートするために新しい値を追加する必要はありません。

参考: CSSのこの新機能、すごく楽しみ! UI要素にさまざまなアニメーションを簡単に実装できるようになります

動作はデモページでご覧ください。
※Chrome 116から

See the Pen
Fade out cards - Animation
by coliss (@coliss)
on CodePen.

Chrome 116で見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

他の個別プロパティは、トランジションのイージング関数の50%で状態が切り替わります。ただし、displaycontent-visibilityはトランジションの開始時または終了時に切り替わります。

上記のデモでは、0.5秒の継続時間に渡って不透明度を0にするアニメーションが行われており、その後displaynoneにします。さらにforwardsキーワードはアニメーションが終了状態のままであることを保証するので、適用された要素はdisplay: none;opacity: 0;のままです。

これはトランジションできることを示した簡単なデモです。ただし、トランジションで次のような複雑なアニメーションは作成できません。

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

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

動作はデモページでご覧ください。
※Chrome Canary, Chrome 116から

See the Pen
Untitled
by coliss (@coliss)
on CodePen.

Chrome 116で見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

上記のデモでは、終了時にdisplay: none;になっています。さらに進めてアニメーションが最初に終了するようにタイムアウトを設定してDOMノードを削除したい場合もあると思います。

個別プロパティのトランジションを可能にする

キーフレームを使用して個別プロパティをアニメーション化する場合とは異なり、個別プロパティをトランジションさせるにはallow-discreteでトランジションのビヘイビアモードを使用する必要があります。

transition-behaviorプロパティ

allow-discreteモードは個別のトランジションを可能にするもので、transition-behaviorプロパティの値です。transition-behaviorには、normalallow-discreteの2つの値があります。

transitionでショートハンドを使用する場合は、transition-behaviorは詳細度により適用されるようにそのショートハンドの後に記述してください。

動作はデモページでご覧ください。
※Chrome 116から

See the Pen
Fade out cards - Transition
by coliss (@coliss)
on CodePen.

Chrome 116で見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

注: このデモは最初のデモと視覚的には似ていますが、異なるテクニックを使用しています。

transitionのショートハンド記法でもこの値が設定されるため、プロパティを省略し、代わりに各トランジションのショートハンドの最後にあるallow-discreteキーワードを使用できます。

複数の個別プロパティをアニメーション化する場合は、アニメーションさせる各プロパティの後にallow-discreteを与えます。たとえば、下記のように記述します。

メモ: * {transition-behavior: allow-discrete}を使用すると、常に個別アニメーションをオンにできますが、トランジションのショートハンドとの詳細度の衝突を防ぐために、記述の順番が後になっていることを確認してください。

開始アニメーションの@starting-styleルール

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

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

デモのTODOリストでは、アイテムの開始と終了の両方の状態が得られます。
※アニメーションはChrome Canary, Chrome 117から

See the Pen
Item transitions
by coliss (@coliss)
on CodePen.

Chrome Canaryで見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

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

要素を最上位レイヤーとの間でアニメーションさせるには、openの状態で@starting-styleを設定してどこからアニメーションさせるかをブラウザに伝えます。ダイアログの場合だと、open状態は[open]で定義できます。ポップオーバーの場合だと、:popover-open疑似クラスを使用します。

ダイアログの実装は次のようになります。

動作はデモページでご覧ください。
※アニメーションはChrome Canary, Chrome 117から

See the Pen
Dialog animation example
by coliss (@coliss)
on CodePen.

Chrome Canaryで見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

次のデモでは、開始と終了のエフェクトが異なります。開始時はビューポートの下から上にアニメーションし、終了時はビューポートの上にアニメーションします。また、より視覚的にカプセル化するためにネストされたCSSで記述しています。

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

動作はデモページでご覧ください。
※アニメーションはChrome Canary, Chrome 117から

See the Pen
Toolbar Popover Demo - Transition in and out, cleaner with nesting
by coliss (@coliss)
on CodePen.

Chrome Canaryで見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

overlayプロパティ

最後に、popoverdialogを最上位レイヤーからフェードアウトするには、トランジションのリストにoverlayプロパティを追加します。popoverdialogは祖先のクリップとトランスフォームをエスケープし、コンテンツを最上位レイヤーに配置します。overlayをトランジションしない場合、要素はすぐにクリップされ、変形され、覆い隠された状態に戻り、トランジションが発生することはありません。

デモの動作

その代わりに、トランジションやアニメーションにoverlayを含めることで、overlayを他の機能と一緒にアニメーションさせ、アニメーション化するときに最上位レイヤーに留まるようにします。これにより、見た目がよりスムーズになります。

デモの動作

動作はデモページでご覧ください。
※アニメーションはChrome Canary, Chrome 117から

See the Pen
overlay, dialog, popover, backdrop
by coliss (@coliss)
on CodePen.

さらに、最上位レイヤーで複数の要素を開いている場合、オーバーレイは最上位レイヤーへのスムーズなトランジションを制御するのに役立ちます。この簡単なデモでその違いが分かります。2番目のポップオーバーにoverlayを適用していない場合はトランジションを開始する前に、ポップオーバーは最初に最上位レイヤーに移動し、他のポップオーバーの後ろにジャンプします。これはあまりスムーズなエフェクトではありません。

ビュー トランジションに関する注意点

DOMに要素を追加したり削除したりするなどDOMに変更を加える場合、スムーズなアニメーションを実現するもう一つの優れたソリューションが、ビュー トランジション(view transitions)です。この記事ではビュー トランジションを使用したデモを2つ解説します。

1つ目のデモです。@starting-styleやその他のCSSトランフォームを設定する代わりに、ビュー トランジションを処理します。

まずは、CSSで各カードに個別のview-transition-nameを与えます。

次にJavaScriptで、ビュー トランジションでDOMの変更(この場合はカードの削除)をラップします。

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

See the Pen
Fade out cards - Transition -- Just VT
by coliss (@coliss)
on CodePen.

Chrome 116で見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

2つ目は、リスト項目の追加と削除のデモです。この場合、作成したカードごとにユニークなview-transition-nameを与える必要があります。
※Chrome 116から

See the Pen
Item transitions with VT
by coliss (@coliss)
on CodePen.

Chrome 116で見るのが面倒な人用に、デモの動作をGIFアニメで。

デモの動作

終わりに

この記事で解説した新しい機能により、Webプラットフォームでの開始および終了のスムーズなアニメーションにまた一歩近づきました。詳細については、下記のリンクをご覧ください。

sponsors

top of page

©2024 coliss