CSS Master

div {

background: #36f;

margin-bottom: 1em;

width: 30px;

height: 30px;

position: relative;

left: 0;

transition: left 2s ease-in;

}

.moved {

left: 1000px;

}

Whentriggered,thisanimationwillgeneratealotofstylecalculationandrepaint
indicatorsinourtimeline.Theimagesthatfollowshowtimelineoutputforthis
transitioninSafari(Figure3.17),Chrome(Figure3.18),InternetExplorer(Fig-
ure3.19),andFirefox(Figure3.20).

Figure 3.17. Safari timeline output for left-position transition

Debugging and Optimization 111