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);
	}
}

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