CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

Post on:2023年9月21日

sponsorsr

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。

今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。

Chrome 117 beta

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

はじめに
@starting-styleルール
overlayプロパティ
transition-behaviorプロパティ
CSS Gridのsubgrid値
text-wrap: pretty;
contains-intrinsic-size: auto noneのサポート

はじめに

Chrome 117でサポートされたCSSの新機能を使用することで、開始アニメーションと終了アニメーションを簡単に追加し、ダイアログやポップオーバーなどの最上位レイヤーの非表示要素との間でスムーズなアニメーションを実装できます。

@starting-styleルール

@starting-styleルールを使用すると、CSSのトランジションで変化する前のスタイルを適用することができます。

CSSのトランジションは要素の最初のスタイル更新時、またはdisplayタイプがnoneから他に変更された時に、初期スタイルからのトランジションをトリガーできませんでした。これは初期スタイルからの予期せぬ遷移を避けるためです。

トランジションで変化する前のスタイルを適用するには、@starting-styleルール内でスタイルを設定します。

たとえば、下記のCSSはdivの背景をライムグリーンにトランジションするCSSで、変化する前のスタイルを@starting-style内に設定します。

div { 
  transition: background-color 0.5s; 
  background-color: lime; 
} 

@starting-style {
  div { 
    background-color: green; 
  } 
}

div {

transition: background-color 0.5s;

background-color: lime;

}

@starting-style {

div {

background-color: green;

}

デモを表示すると、背景色がグリーンからライムに変化します。繰り返し表示したい場合は、下部の「Return」をクリックしてください。

See the Pen
@starting-style rule by coliss (@coliss)
on CodePen.

参考:

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

overlayプロパティ

overlayプロパティは、終了時のトランジションのために要素を最上位レイヤーに維持することを可能します。overlayプロパティは要素が最上位レイヤーにあるかどうかを示すために追加され、noneとautoの2つの値を取ることができます。

popoverやdialogを最上位レイヤーからフェードアウトするには、トランジションのリストにoverlayプロパティを追加します。

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

参考:

transition-behaviorプロパティ

CSSのtransition-behaviorプロパティは、トランジションで個別のプロパティを使用できるようにするtransitionプロパティの省略形です。

transition-behaviorの値にallow-discreteを設定すると、個別プロパティはアニメーションを開始し、50%で初期値から最終値へと反転します。display: none;やcontent-visibility: hidden;が初期値または最終値のいずれかであるトランジションでは、トランジションする間にわたってvisible値が使用されます。

複数の個別プロパティを簡単にアニメーション化できます。

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

参考:

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

CSS Gridのsubgrid値

CSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。この値により、ネストされたグリッドは行、列、またはその両方に対して新しいトラック定義を作成するのではなく、その親で定義されたトラックを使用することができます。