CSS | ひとつの要素に複数の@keyframesを指定する方法

2021-06-05CSS アニメーション 基本,CSS

CSSのanimationプロパティで、ひとつの要素に対して複数の@keyframesを指定する方法を紹介しています。

ひとつの@keyframesに様々な要素を追加してもどうしても単調な動きになってしまいますが、アニメーション時間や繰り返し処理、イージングの違うanimationプロパティを複数指定する事でCSSだけでランダム的な動きを見せる事が可能になります。

ひとつの要素に複数の@keyframesを指定する

animationプロパティは普通に複数回指定しても上書きになってしまいます。

div{
	animation: anim1 1s;
	animation: anim2 2s;
}

@keyframesを複数指定したい場合は、カンマ区切りで指定します。

div{
	animation: anim1 1s, anim2 2s;
}

ひとつの要素に2つの@keyframesを指定したCSSアニメーションのサンプルを紹介します。

See the Pen CSS | Multiple @keyframes by yochans (@yochans) on CodePen.

<div class="container">
	<div class="box"></div>
</div>

それぞれの@keyframesでアニメーション時間を変更して回転速度と色を変更する速度の違うアニメーションを実装しています。

.box{
	width:50px;
	height:50px;
	background:#0091EA;
	margin:20px;
	animation: rotateY 1s linear infinite,
		change-color 10s linear infinite;
}

@keyframes rotateY {
	100%{transform: rotateY(360deg);}
}

@keyframes change-color {
	0%,100%{ background:#ff1493; }
	25%{ background:#7fff00; }
	50%{ background:#0091EA; }
	75%{ background:#9400d3; }
}

上記サンプルくらいでしたら、ひとつの@keyframesでも簡単に実装可能ですが、イージング処理や時間軸をずらす事で、より複雑なパターン化しない動きを付ける事が可能になります。