CSS keyframes animation でアニメーションを複数指定する場合は、bothに注意！

hoge

CSSでkeyframesアニメーションを複数設定しようとしたら、動かなかった。

 

jqueryから単発で設定していると動く。

もちろん、CSS構文エラーも発生していない。

 

動かしたらアニメーションは、この３つ。
これを順番に動かしたい。

１．anime1 を 3秒間、開始遅延時間は 0秒
↓
２．anime2 を 1秒間、開始遅延時間は 3秒
↓
３．anime3 を 30秒間、開始遅延時間は 8秒

/* NGパターン（動作しない） */
.act{
	-webkit-animation:
			anime1 3s ease-out 0s both, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s both;
	-moz-animation:
			anime1 3s ease-out 0s both, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s both;
	-ms-animation:
			anime1 3s ease-out 0s both, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s both;
	animation:
			anime1 3s ease-out 0s both, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s both;
}

↓

/* OKパターン（動作する） */
.act{
	-webkit-animation:
			anime1 3s ease-out 0s forwards, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s forwards;
	-moz-animation:
			anime1 3s ease-out 0s forwards, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s forwards;
	-ms-animation:
			anime1 3s ease-out 0s forwards, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s forwards;
	animation:
			anime1 3s ease-out 0s forwards, 
			anime2 1s ease-in-out 3s infinite alternate, 
			anime3 30s ease-in 8s forwards;
}

animation-fill-modeプロパティの「both」を「forwards」に変更したら動いた。

 

forwards はアニメーション終了後の状態を維持するためのもの。
both はアニメーション前後の状態を維持するもの。

 

たぶん、この「前」が含まれているっていうのが、複数アニメーション設定時に、前後のアニメーションに干渉してしまう様子。

なので「forwards」だけでよいらしい。

 

というお話でした。