Stepped Transitions
Withsteppedtransitions,theplaycycleisdividedintointervalsofequalvalueand
duration.Wecansethowmanyintervalsatransitionshouldhaveusingthesteps
timingfunction.Let’srevisitourbackgroundcolorexamplefromearlierinthischapter.Insteadof
usingthedefaulteasetimingfunction,we’llinsteadusethestepsfunctiontocreate
afive-steptransition.OurrevisedCSSlookslikethis:body {
background: #f0f;
transition: 5s steps(5);
}.change {
background: #0cf;
}Ratherthanasmooth,gradualshiftbetweencolors,thistransitionwillcyclethrough
fivedistinctcolorstates.Therearealsotwokeywordswecanusetocreatesteppedanimations:step-start
andstep-end.Theseareequivalenttosteps(1, start)andsteps(1, end).With
thesekeywords(ortheirstepfunctionequivalents),thetransitionwillhaveexactly
oneintervalbetweenthestartvalueandendvalue.Smooth Transitions
Smoothtransitionsusethecubic-bezierfunctiontointerpolatevalues.Understand-
inghowthisfunctionworksinvolvesabitofmath,alongwithsomehandwaving
andmagic.ReadPomax’“APrimeronBézierCurves”^12 ifyou’reinterestedinthe
intimatedetails.Whatfollowsisasimplifiedexplanation.ThecubicBézierfunctionisbasedonthecubicBéziercurve.Ingeneral,aBézier
curveconsistsofastartpointandanendpoint,andoneormorecontrolpointsthat
affecttheshapeofthecurve.AcubicBéziercurvealwayshastwoofthesecontrol
points,whichcanbeseeninFigure5.5.Curvesaredrawnfromthestartpointto
theendpoint,towardsthecontrolpoints.(^12) http://pomax.github.io/bezierinfo/#explanation
200 CSS Master