CSS Performance Use transform and opacity to avoid trigger layout
Example
Changing some CSS attribute will trigger the browser to synchronously calculate the style and layout, which is a bad thing when you need to animate at 60fps.
DON'T
Animate with left and top trigger layout.
#box {
left: 0;
top: 0;
transition: left 0.5s, top 0.5s;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
}
#box.active {
left: 100px;
top: 100px;
}
Demo took 11.7ms for rendering, 9.8ms for painting
DO
Animate with transform with the same animation.
#box {
left: 0;
top: 0;
position: absolute;
width: 50px;
height: 50px;
background-color: gray;
transition: transform 0.5s;
transform: translate3d(0, 0, 0);
}
#box.active {
transform: translate3d(100px, 100px, 0);
}
Demo same animation, took 1.3ms for rendering, 2.0ms for painting.
