transform: scale(1);
opacity: 1;
}
}Thiscodewillscaleourobjectfromhalfitssizetoitsfullsize,andchangethe
opacityfrom80%to100%.^20
Thekeyframesruleonlydefinesananimation,though.Nothingisactuallymade
tomove.Forthat,weneedtoapplyit.Let'salsodefineapulseclassthatwecan
usetoapplythisanimationtoanyelement:
.pulse {
animation: pulse 500ms;
}Herewe’veusedtheanimationshorthandpropertytosettheanimationnameand
duration.Inorderforananimationtoplay,weneedthenameofan@keyframes
rule(inthiscase,pulse)andaduration.Otherpropertiesareoptional.
Theorderofpropertiesforanimationissimilartothatoftransition.Thefirst
valuethatcanbeparsedbecomesthevalueofanimation-duration.Thesecond
valuebecomesthevalueforanimation-delay.Wordsthataren’tCSS-widekeywords
oranimationpropertykeywordvaluesareassumedtobe@keyframerulesetnames.
Aswithtransition,animationalsoacceptsananimationlist.Theanimationlist
isacomma-separatedlistofvalues.Wecould,forexample,splitourpulseanimation
intotworules:pulseandfade:
@keyframes pulse {
from {
transform: scale(0.5);
}
to {
transform: scale(1);
}
}(^20) Use@-webkit-keyfamestosupportolderversionsofChrome(<43)andSafari(<9).Use@-moz-
keyframesifyouneedtosupportolderversionsofFirefox(<16).
Transitions and Animation 211