Detecting When Animations Start, End, or Repeat
Liketransitions,animationsfireaneventwhentheyend:animationend.Unlike
transitions,animationsalsofireanimationstartandanimationiterationevents
whentheybeginorrepeat.Aswithtransitions,youmightusetheseeventstotrigger
anotheractiononthepage.Perhapsyou’duseanimationstarttocontextuallyreveal
aStop Animationbutton,oranimationendtorevealaReplaybutton.
WecanlistenfortheseeventswithJavaScript.Below,we’relisteningfortheanim-
ationendevent:
var animate = document.getElementById('#animate');animate.addEventListener('animationend', function(eventObject) {
// Do something
});Thecodeisslightlydifferentifyou’reusingjQuery:
$('#animate').on('animationend', function(eventObject) {
// Do something
});Vendor Prefixing
InChrome< 43 andSafari<9,theseeventsstillrequireavendorprefix.They’re
alsocamel-cased:webkitAnimationStart,webkitAnimationEnd,andweb-
kitAnimationIteration.Here,too,theeventhandlerfunctionreceivesaneventobjectasitssoleargument.
Inordertodeterminewhichanimationended,wecanquerytheanimationName
propertyoftheeventobject.
A Note About Accessibility
Transitionsandanimationscanenhancetheuserexperiencebymakinginteractions
smoothratherthanjumpy,otherwisebringingdelighttotheinterface;however,
theystillhaveaccessibilityrisks.Largespinninganimations,forexample,cancause
Transitions and Animation 219