【海外記事紹介】Chrome 116、117に搭載された4つの新機能ー CSSアニメーションがより進化

8月16日、Google Chromeで滑らかなアニメーションを実現するための4つのCSSの新機能についての記事が公開された。この記事では、ウェブデザイナーや開発者たちにとって注目すべき新しいアニメーション技術が紹介されている。

ウェブページのアニメーションは、ユーザーエクスペリエンスにおいて重要な役割を果たしている。ユーザーがさまざまなインタラクションを行う際に、スムーズな遷移が求められるが、これまでにもいくつかの課題が存在していた。

その中でも特に、入力や退出のアニメーションを滑らかに行うことや、ダイアログやポップオーバーなどの消去可能な要素に対して、トップレイヤーからのアニメーションをスムーズに行うことが難しいとされていた。

Chrome 116と117では、これらの課題に対処するために、以下の4つの新機能が導入された。

1. `display` と `content-visibility` のキーフレームアニメーション（Chrome 116）:

新たなウェブプラットフォーム機能により、display および content-visibility をキーフレームルール内でアニメーション化することが可能となった。これにより、要素の表示や非表示をアニメーション化する際に、滑らかなエフェクトを簡単に適用することができる。

以下は、アニメーションの一例だ。

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

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

transition-behavior プロパティに allow-discrete キーワードを使用することで、display などの離散プロパティをトランジションさせることが可能となった。これにより、トランジションをより制御しやすくなり、滑らかなアニメーションを実現できる。

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

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

@starting-style ルールを使用することで、display: none からのエントリーエフェクトをアニメーション化することができる。これにより、要素の表示が滑らかに行われると同時に、トップレイヤーでの動作も制御できる。

overlay プロパティを使用することで、アニメーション中におけるトップレイヤーの動作を制御することができる。特に、popover や dialog などの要素のトップレイヤー動作を滑らかに制御する際に便利だ。

これらの新機能により、ウェブデザイナーや開発者たちは従来よりも高度なアニメーション効果を実現できるようになった。詳細な情報やコード例は、公式ドキュメントにて確認できる。

詳しい内容については、「Four new CSS features for smooth entry and exit animations」をご確認ください。

Chromeの最新のアップデートにより、ウェブプラットフォーム上でのスムーズな入力と出力アニメーションが可能になりました。
新しいCSS機能を使用することで、より魅力的なユーザーエクスペリエンスを提供することができます。
今後もウェブプラットフォーム上でのアニメーションの改善が期待されます。