Chapter 5 Transitions and Animation
5. Transitions and Animation
Nowthatwe’vecoveredsomeadvancedCSSlayouts,let’slookathowtoaddsome
whimsy,delight,andpolishtoourdocumentswithCSStransitionsandanimations.
Transitionsandanimationscanoftenclarifytheeffectofanaction.Amenuthat
slidesintoview,forexample,islessabruptandjarringthanonethatappearssud-
denlyafterabuttonisclicked.Transitionsandanimationscanalsodrawattention
toapagechangeorproblem.Youmight,forinstance,transitionthebordercolorof
aformfieldtohighlightthatitsvalueisinvalid.^1
Thisisprobablyagoodtimetoexplainhowanimationsandtransitionsdiffer.With
atransition,youdefinestartandendstates,andthebrowserfillsinthestatesin
between.Withanimations,ontheotherhand,youcandefinethosein-between
statesandcontrolhowtheanimationprogresses.
(^1) “AnimationforAttentionandComprehension”[http://www.nngroup.com/articles/animation-usability/]
fromtheNielsenNormanGroupisanicebackgrounderonhowanimationsandtransitionscanenhance
usability.