animationstartやtransitionendなどのイベントに、発火元のCSSAnimation / CSSTransitionをevent.animationとして載せるプロパティです。
同じ@keyframesを長さ違いで2本指定した要素のイベントを記録し、animationNameでは同じに見える2本をevent.animationのdurationで見分けられる様子を確認できます。animationendでは、終わったアニメーションがgetAnimations()から外れていることも分かります。
イベントのログ
再生を押すと、イベントごとにevent.animationから読んだ値が並びます
要素に当てているCSSです。animationNameはどちらもbeatですが、event.animationのdurationで2本を区別できます。
@keyframes beat {
50% {
opacity: 0.2;
}
}
.animation-accessors-target {
animation:
beat 0.5s 3,
beat 0.8s 3;
}