CSS: animation

There're basically 4 types of animation that modern browsers can do cheaply: position, scale, rotate and opacity.

position -> transform: translate(npx, npx);
scale -> transform: scale(n);
rotate -> rotate: rotate(ndeg);
opacity -> opacity: 0...1;

The process a website is loaded:

1. Function call;
2. Recalculate style;
3. Layout: generate geometry and position;
4. Paint: fill out the pixels for each elements into layers;
5. Composite Layers: draw layers out to the screen;

Position, scale, rotate and opacity only change properties that affect compositing stage, which makes them cheap.

And Chrome, Firefox, Safari and Opera all hardware accelerate transforms and opacity.

This is a good reference to find out which exact stage a css property affects:

http://goo.gl/lPVJY6

Opacity must be only one in the layer in order not to change background of others. Blink and Webkit browsers will automatically create a layer for opacity changes, but translateZ(0) and translate3d(0, 0, 0) are also used to create a new layer manually.

As to change position, setting left and top directly will change layout, so remember to use translate.