Whenthesepropertiesareanimated,thebrowsermustrecalculatethesizeandpo-
sitionoftheaffected—andoftenneighboring—elements.UseChapter 6 whereyou
can.Transitioningoranimatingatranslationtransform[thatis,transform:
translate(100px,200px)]canreplacetop,left,right,andbottomproperties.In
somecases,heightandwidthanimationscanbereplacedwithascaletransform-
ation.
Sometimes,triggeringareflow(orlayoutupdate)isunavoidable.Inthosecases,
minimizethenumberofelementsaffectedandusetricks(suchasnegativedelays)
toshortentheperceivedanimationduration.
Propertiesthattriggerarepaintaretypicallythosethatcauseacolorchange.These
include:
■ background
■ background-image
■ background-position
■ background-repeat
■ background-size
■ border-radius
■ border-style
■ box-shadow
■ color
■ outline
■ outline-color
■ outline-style
■ outline-width
Changestothesepropertiesarelessexpensivetocalculatethanthosethataffect
layout,buttheydostillhaveacost.Changestobox-shadowandborder-radiusare
especiallyexpensivetocalculate,especiallyforlow-powereddevices.Usecaution
whenanimatingtheseproperties.
Conclusion
Inthischapter,we’velookedathowtoaddmotiontowebpagesusingCSStrans-
itionsandanimations,andwhyyoumightliketodoso.We’vealsotouchedon
Transitions and Animation 221