nhです。

5月に入り、日中は汗ばむ日も増えてきましたね。朝晩はまだ過ごしやすいのに、ふとした瞬間に初夏らしい暑さを感じるようになってきました。

今回は、そんな季節の変わり目にぴったりな「@starting-styleを使用したアニメーション」についてご紹介します。

@starting-style は、要素が最初に表示されるときや、 display: none の状態から現れるときのアニメーション、いわゆるエントリアニメーションを定義するためのアットルールです。

これまでのようにJavaScriptの setTimeout で表示直後の状態をずらす必要がなく、CSSだけで自然なフェードインやスライドインを実装できるのが大きなポイントです。

それでは、具体的な使い方を3つのパターンで見ていきましょう。

1. 要素が追加された時のフェードアニメーション

新しい要素がDOMに追加されたとき、背景色を黄色から透明へ変化させる例です。

/* CSS */
div {
	transition: background-color 1s;
	background-color: transparent;
}

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

表示された瞬間の初期値を @starting-style で定義しておくことで、描画直後からスムーズに色が切り替わります。

2. ダイアログの表示アニメーション

<dialog> を開くときに、透明度を変化させてふわっと表示させる例です。 display のような離散プロパティをアニメーションさせるには、 transition-behavior: allow-discrete を併用するのがポイントです。

/* CSS */
dialog {
	transition:
		opacity 0.5s,
		display 0.5s allow-discrete,
		overlay 0.5s allow-discrete;
	opacity: 0;
}

dialog[open] {
	opacity: 1;
}

@starting-style {
	dialog[open] {
		opacity: 0;
	}
}

ダイアログが開いた直後の状態を @starting-style で指定しておくことで、表示の切り替わりが急に見えず、自然な立ち上がりになります。

3. ポップオーバーの表示アニメーション

Popover APIを使った要素を、少し縮小した状態からスケールアップしながら表示する例です。

/* CSS */
[popover] {
	transition:
		opacity 0.4s,
		transform 0.4s,
		display 0.4s allow-discrete;
	opacity: 0;
	transform: scale(0.9);
}

@starting-style {
	[popover]:popover-open {
		opacity: 0;
		transform: scale(0.9);
	}
}

こちらも、表示される直前の状態を @starting-style で定義することで、ポップオーバーが「ぽん」と出るのではなく、なめらかに浮かび上がるように見せられます。

@starting-styleでできること

5月の心地よい空気のように、UIの動きも自然で軽やかにできるのが @starting-style の魅力です。今後のフロントエンド実装で、かなり使いどころの多い機能になりそうですね。