CSS Master

.moved {

transform: translateX(1000px);

}

Herewe’reusingatransformandtransitioningbteweentranslateX(0)and

translateX(1000px).

Inmostbrowsers,transformsdon’ttriggerreflows,andourtimelineswillcontain

farfewerrepaintoperations.ThisisevidentinSafari(Figure3.21),Chrome(Fig-

ure3.22),andInternetExplorer(Figure3.23).Firefoxistheexceptionhere;compare

Figure3.20toFigure3.24.Thetimelinesforalefttransitionandatranslation

transformationareverysimilar.

Figure 3.21. Safari timeline output for a transition of the -webkit-transform property

114 CSS Master