Figure 5.5. A cubic Bézier curve, where the filled circles are the control pointsTheargumentspassedtothecubic-bezierfunctionrepresentthecoordinatesof
thosecontrolpoints:x1,y1,x2,y2.Butthere'saconstraintonthesepoints:Xval-
ues—thefirstandthirdparameters—mustfallbetween 0 and 1 .Yvalues(thesecond
andfourthparameters)canexceedthisrangeineitherdirection.Inotherwords,
cubic-bezier(0, 1.02, 1, 0)andcubic-bezier(0, 1.08, .98, -0.58)are
validvalues,butcubic-bezier(2, 1.02, -1, 0)isnot.^13
Graphsarethebestwaytoillustratehowcubic-bezierworks.TheX-axisisa
functionofthetransition’sduration,andcanbeseeninFigure5.6.TheY-axisisa
functionofvalueofthepropertythat’sbeingtransitioned.Theoutputsforthese
functionsdeterminethevaluesofthepropertyataparticularpointinthetransition.
Changesinthegraphmatchthechangesinspeedoverthecourseofatransition.
(^13) LeaVerou'scubic-bezier.com[http://cubic-bezier.com/]isagreattoolforexperimentingwiththe
cubic-bezierfunction.
Transitions and Animation 201