otherUnicode)charactersusuallywill.Forclarityandmaintainability,it’sagood
ideatogiveyouranimationsdescriptivenames,andavoidusingCSSpropertiesas
names.To Loop or Not to Loop: The
animation-iteration-count Property
Ifyou’refollowingalongwithyourowncode,you’llnoticethatthisanimationonly
happensonce.Wewantouranimationtorepeat.Forthat,we’llneedtheanimation-
iteration-countproperty.Theanimation-iteration-countpropertyacceptsmostnumericvalues.Whole
numbersanddecimalnumbersarevalidvalues.Withdecimalnumbers,however,
theanimationwillstoppart-waythroughthelastanimationcycle,endinginthe
tostate.Negativeanimation-iteration-countvaluesaretreatedthesameas 1.Tomakeananimationrunindefinitely,usetheinfinitekeyword.Theanimation
willplayaninfinitenumberoftimes.Ofcourse,infinitereallymeansuntilthe
documentisunloaded,thebrowserwindowcloses,theanimationstylesareremoved,
orthedeviceshutsdown.Let’smakeouranimationinfinite:.pulse {
animation-name: pulse;
animation-duration: 500ms;
animation-iteration-count: infinite;
}Or,usingtheanimationshorthandproperty:214 CSS Master