.pulse {
animation: pulse 500ms infinite;
}Playing Animations: the animation-direction Property
There’sstillaproblemwithouranimation,however.Itdoesn’tsomuchpulseas
repeatourscaling-upanimation.Whatwewantisforthiselementtoscaleupand
down.Entertheanimation-directionproperty.
Theanimation-directionpropertyacceptsoneoffourvalues:
normal: theinitialvalue,playingtheanimationasspecified
reverse: flipsthefromandtostatesandplaystheanimationin
reverse
alternate: playseven-numberedanimationcyclesinreverse
alternate-reverse: playsodd-numberedanimationcyclesinreverse
Tocontinuewithourcurrentexample,reversewouldscaledownourobjectbya
factorof0.5.Usingalternatewouldscaleourobjectupfortheodd-numbered
cycles,downfortheeven-numbered.Conversely,usingalternate-reversewould
scaleourobjectdownfortheodd-numberedcyclesandupfortheevenones.Since
thisistheeffectwewant,we’llsetouranimation-directionpropertytoalternate-
reverse:
.pulse {
animation-name: pulse;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}Or,usingtheshorthandproperty:
Transitions and Animation 215