.wiggle {
animation: wiggle 500ms;
}There’sjustoneproblemhere.Whenouranimationends,itgoesbacktotheoriginal,
pre-animatedstate.Topreventthis,weusetheanimation-fill-modeproperty.
The animation-fill-mode Property
Animationshavenoeffectonpropertiesbeforetheybeginoraftertheystopplaying.
Butasyou’veseenwiththewiggleexample,onceananimationends,itrevertsto
itspre-animationstate.Withanimation-fill-mode,wecanfillinthosestatesbefore
theanimationstartsandends.
Theanimation-fill-modepropertyacceptsoneoffourvalues:
none: theanimationhasnoeffectwhenitisnotexecuting
forwards: whentheanimationends,thepropertyvaluesoftheendstatewill
stillapply
backwards: propertyvaluesforthefirstkeyframewillbeappliedduringthe
animationdelayperiod
both: effectsforbothforwardsandbackwardsapply
Sincewewantouranimatedelementtoremaininitsfinal,scaled-upstate,we’re
goingtouseanimation-fill-mode: forwards(animation-fill-mode: bothwould
alsowork).
Theeffectofanimation-fill-mode: backwardsismostapparentwhentheanima-
tion-delaypropertyissettoa500msorhigher.Whenanimation-fill-modeisset
tobackwards,thepropertyvaluesofthefirstkeyframeareapplied,buttheanimation
isnotexecuteduntilthedelayelapses.
Pausing Animations
Ashasbeenmentioned,animationscanbepaused.Transitionscanbereversed
mid-way,orstoppedaltogetherbytogglingaclassname.Animations,ontheother
Transitions and Animation 217