CSS Master

Figure 3.20. And how it looks in Firefox

Thereasonforthestylecalculationsandrepaintshastodowiththepropertywe’re
transitioning:left.Theleftpropertytriggersareflowwheneveritischanged,
evenifthatchangeiscausedbyananimationortransition.

Now,let’stakealookattheCSSforExampleB:

div {

background: #f3f;

margin-bottom: 1em;

width: 30px;

height: 30px;

position: relative;

left: 0;

transition: transform 2s ease-in;

transform: translateX(0);

}

Debugging and Optimization 113