cssアニメーションの発火タイミングをjsで制御したいです

Question

下記のコードで、cssアニメーションを利用して要素をフェイドインさせてから、ふわふわさせる動きを付けました。

<ul class="girls">
  <li class="girls-a"><img src="img/girls-a.png" alt=""></li>
  <li class="girls-b"><img src="img/girls-b.png" alt=""></li>
  <li class="girls-c"><img src="img/girls-c.png" alt=""></li>
</ul>

.girls {
	position: relative;

	li {
		position: absolute;
	}

	&-a {
		top: 39px;
		left: calc(50% - 595px);
		opacity: 0;
		animation:
			fadeIn-girls .5s ease 1s 1 normal forwards,
			floating 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1.4s infinite;
		transition: .5s;

		img {
			width: 502px;
		}
	}

	&-b {
		top: 9px;
		left: calc(50% - 227px);
		opacity: 0;
		animation:
			fadeIn-girls .5s ease .8s 1 normal forwards,
			floating 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1.2s infinite;
		transition: .5s;

		img {
			width: 423px;
		}
	}

	&-c {
		top: 10px;
		left: calc(50% + 194px);
		opacity: 0;
		animation:
			fadeIn-girls .5s ease 1.2s 1 normal forwards,
			floating 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1.6s infinite;

		img {
			width: 408px;
		}
	}
}

@keyframes fadeIn-girls {
	0% {
		opacity: 0;
		transform: translateY(-200px);
	}

	50% {
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes floating {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0px);
	}
}

見ての通りfadeIn-girlsでフェイドインの実行をし、その後にfloating でふわふわする動きを付け、それぞれanimation-delayを指定し、実行するタイミングをずらしています。

見た目上はこれで上手くいっているのですが、Aを実行させた後にBを実行させるという動きを、animation-delayで書いてしまうのは果たして良いのかと感じたので、質問させていただきました。

js側でfadeIn-girlsを実行させた後に、floatingを実行させたいのですが、どのように記述すればよいでしょうか。

Answer 1

↓この辺りを使うといいのでは。

animationend イベントは、 CSS アニメーションが完了したときに発生します

Document: animationend イベント - Web API | MDN

　

AnimationEvent.animationName 読取専用

DOMString で、この変化に関連付けられた animation-name CSS プロパティの値を含みます。

AnimationEvent - Web API | MDN