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

朗報です！！！
今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！

たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。

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

Google ChromeのデベロッパーUna氏（@Una）によると、transitionプロパティでdisplayが使用できるようになり、要素の表示・非表示、ポップオーバーなどのアニメーションが簡単なCSSで実装できるようになるとのことです。

👀 An early look at transitioning to and from display: none in CSS 👀 pic.twitter.com/uICGqCZcvC

— Una 🇺🇦 (@Una) April 25, 2023

CSSの新機能は、@initialです。
※プロパティの初期値を設定するinitialとは異なります。

@initialは、初期状態を設定できるCSSの新機能です。transitionでdisplayが使用できないのはなぜかというと、transitionは状態間の変化を定義するプロパティで、display: none;とdisplay: block;で変化させるとdisplay: none;時は存在がない状態だったため使用できませんでした。しかし、@initialで初期状態を設定すると、displayが使用できるようになります。

@initialは仕様が確定している状態ではありません（w3c/csswg-drafts）。前述したようにinitialプロパティと混同しやすいなど懸念事項があるため、変更される可能性もあります。現在@initialが動作するブラウザは、Chrome Canaryのみとなっています。

これらのアニメーションは、デモページで実際に試せます。
2023年4月現在、デモを動作させるには、Chrome Canaryで「#experimental-web-platform-feature」のflagを有効にする必要があります。

chrome://flags/にアクセスし、flagを有効（Enabled）にする

まずは、チェックボックスをオンにすると、要素がdisplay: none;からdisplay: block;にトランジションするデモ。オフにすると非表示になります。

デモページ（Chrome Canaryで表示）

CSSは、下記の通り。
displayがtransitionで使用できるようになるのもすごいですが、@initialでアニメーション化前の状態を設定することが重要なポイントです。

続いて、:popoverと@initialを使用したポップオーバー。下部の3つのアイコンをタップすると、それぞれのポップオーバーが表示されます。

デモページ（Chrome Canaryで表示）

CSSは、下記の通り。

1. :popover-openと@initialを使用して、オープンする前の初期状態のスタイルを設定します。
2. :popover-open内で、オープン状態を設定します。
3. ベースとなる要素で、アニメーション先を設定します。