CSSのトランジションで、要素が最初に表示されるときのアニメーションを実装できる @starting-style が使えるようになりました。

これまでは、初期表示時のアニメーションを実装するためにJavaScriptを使うこともありましたが、@starting-style を使えばCSSだけで開始時のスタイルを定義できます。

今回は、これまでの方法と比較しながら @starting-style を見ていきます。

@starting-styleとは？

@starting-style は、CSSトランジションにおける開始時のスタイルを定義するためのアットルールです。

通常、CSSの transition は「ある状態から別の状態へ変化する」ときに動作します。

しかし、ページに最初に表示される要素には、その前の状態がありません。

そのため、例えば次のようなCSSを書いても、初期表示時にはトランジションが実行されません。

.box {
	opacity: 1;
	transition: opacity .6s ease;
}

ここで「最初は opacity: 0 から始めたい」と指定できるのが @starting-style です。

.box {
	opacity: 1;
	transition: opacity .6s ease;

	@starting-style {
		opacity: 0;
	}
}

これだけで、要素が最初に表示されるときに opacity: 0 から opacity: 1 へのトランジションが実行されます。

これまで（JavaScriptを使ったやり方）

@starting-style がなかった頃は、JavaScriptでクラスを追加してアニメーションを開始する方法がよく使われていました。

例えば、HTMLを次のようにします。

<div class="box">Hello!</div>

CSSでは、最初の状態と表示後の状態を用意します。

.box {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .6s ease,
		transform .6s ease;
}

.box.is-show {
	opacity: 1;
	transform: translateY(0);
}

そしてJavaScriptで is-show クラスを追加します。

document.addEventListener('DOMContentLoaded', () => {
	const box = document.querySelector('.box');

	box.classList.add('is-show');
});

この方法でも問題なくアニメーションできます。

ただ、単純な初期表示アニメーションのためだけにJavaScriptが必要というのは、少し手間でもあります。

@starting-styleを使うと

@starting-style を使えば、JavaScriptを使わずにCSSだけで同じような初期表示アニメーションを実装できます。

.box {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .6s ease,
		transform .6s ease;

	@starting-style {
		opacity: 0;
		transform: translateY(20px);
	}
}

HTMLもシンプルです。

<div class="box">Hello!</div>

JavaScriptは必要ありません。

@starting-style の中で、

@starting-style {
	opacity: 0;
	transform: translateY(20px);
}

という「開始時の状態」を指定し、通常の .box では最終的な状態を指定しています。

つまり、

開始状態
opacity: 0
transform: translateY(20px)
        ↓
   transition
        ↓
終了状態
opacity: 1
transform: translateY(0)

という形です。

「最初に表示されるときの状態」をCSSで明示できるので、コードもかなり分かりやすくなります。

また、@starting-style は通常のCSSルールの中にネストして記述する方法だけでなく、独立したブロックとして記述することもできます。

Baselineにも対応

@starting-style は Baseline 2024 に含まれており、2024年8月から主要ブラウザで利用できる機能として扱われています。

現在のブラウザ対応状況を確認すると、Can I Useではグローバル使用率が 90.65% となっています。

Can I use — @starting-style のブラウザ対応状況

Chrome、Edge、Firefox、Safariなどの主要ブラウザで対応していますが、古いブラウザでは利用できない場合があります。

そのため、実際の案件で利用する場合は、対象ブラウザやサポート環境を確認しておくと安心です。

まとめ

@starting-style は、要素が最初に表示されるときの開始スタイルをCSSで定義できる機能です。

これまでJavaScriptを使って、

element.classList.add('is-show');

のように実装していた初期表示アニメーションも、シンプルなケースならCSSだけで実装できます。

.box {
	opacity: 1;
	transition: opacity .6s ease;

	@starting-style {
		opacity: 0;
	}
}

CSSだけで完結することで、JavaScriptの処理を減らせるだけでなく、「どの状態からアニメーションが始まるのか」もCSSを見るだけで分かりやすくなります。

CSSでできることが、また一つ増えました。

今後、初期表示やモーダル、ポップオーバーなどの表示アニメーションを実装するときには、@starting-style を選択肢に入れてみるとよさそうです。