keyframesで同じ値の設定をまとめる

CSSアニメーションのコードを見ていて、あまり見たことのない指定方法を見かけたのでメモ。

サンプルコード

まずは変更前のサンプルです。

<div class="sample"></div>

.sampleが拡大と縮小を繰り返すアニメーションを実装してみます。

.sample {
	animation: zoom 2s infinite;
}
@keyframes zoom {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(1.2);
	}
	40% {
		transform: scale(1);
	}
	60% {
		transform: scale(1.2);
	}
	80% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

scaleの値を1と1.2に繰り返し変更するアニメーションを実装しました。
変更前のデモページ

次に変更後ですが、プロパティと値が同じ物に関しては以下のようにまとめることができるようです。

@keyframes zoom {
	0%, 40%, 80%, 100% {
		transform: scale(1);
	}
	20%, 60% {
		transform: scale(1.2);
	}
}

この指定方法でも変更前と同じように動作しました。
変更後のデモページ
今回の例だと変更前の方が時系列でわかりやすいかもという気がしますが、コードはかなりシンプルになるので場合によっては使ってみるといいかもしれません。
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31