.pulse {
animation: pulse 500ms infinite alternate-reverse;
}Using Percentage Keyframes
Ourpreviousexamplewasasimplepulseanimation.Wecancreatemorecomplex
animationsequencesusingpercentagekeyframes.Ratherthanusingfromandto,
percentagekeyframesindicatespecificpointsofchangeoverthecourseofthean-
imation.Belowisanexampleusingananimationnamedwiggle:css/chapter5/animspctkeyframes.css (excerpt)
@keyframes wiggle {
25% {
transform: scale(.5) skewX(-5deg) rotate(-5deg);
}
50% {
transform: skewY(5deg) rotate(5deg);
}
75% {
transform: skewX(-5deg) rotate(-5deg) scale(1.5);
}
100% {
transform: scale(1.5);
}
}We’veusedincrementsof25%here,butthesekeyframescouldbe5%,10%,or
33.2%.Astheanimationplays,thebrowserwillinterpolatethevaluesbetween
eachstate.Aswithourpreviousexample,wecanassignittoaselector:/* Our animation will play once */
.wiggle {
animation-name: wiggle;
animation-duration: 500ms;
}Orusingtheanimationshorthandproperty:216 CSS Master