CSS Master

Table 5.5. Animation properties

Propertya Description Initial value

0s (executes

immediately)

How long to wait before executing the

animation

animation-delay

0s (no animation

occurs)

How long the cycle of an animation

should last

animation-duration

animation-name The name of a @keyframes rule none

How to calculate the values between the ease

start and end states

animation-timing-function

animation-iteration-count How many times to repeat the animation^1

normal (no

reverse)

Whether or not the animation should

ever play in reverse

animation-direction

Whether the animation is running or running

paused

animation-play-state

Specifies what property values are none

applied when the animation isn’t

running

animation-fill-mode

aTodate,thesepropertiesmustbeprefixedforWebKit/Blink-basedbrowsers(thatis,-webkit-anim-

ation-nameand-webkit-animation-duration).

Theanimation-delayandanimation-durationpropertiesfunctionliketrans-
ition-delayandtransition-duration.Bothaccepttimeunitsasavalue,either
inseconds(s)ormilliseconds(ms)units.Negativetimevaluesarevalidforanima-
tion-delay,butnotanimation-duration.

Let’srewriteour.pulserulesetusinglonghandproperties.Doingsogivesusthe
following:

.pulse {

animation-name: pulse;

animation-duration: 500ms;

}

Theanimation-namepropertyisfairlystraightforward.Itsvaluecanbeeithernone,
orthenameofthe@keyframesrule.Animationnameshavefewrestrictions.CSS
keywordssuchasinitial,inherit,default,andnoneareforbidden.Mostpunc-
tuationcharacterswon’twork,whileletters,underscores,digits,andemoji(and

Transitions and Animation 213