Take the 2-minute tour ×

Can anyone tell me how some css3 code (transitions/transformations) get hardware accelerated? In other words, what actually happens when the browser sees css3, what is the pipeline/process involved?

share|improve this question
add comment

1 Answer

I don't know the details of the respective implementations, but I'd assume that browsers go through some 3D API to render pages - not just for CSS3 specific things, but for everything. A simple implementation of a transition would render both versions of the transition onto textures, then for each frame draw the second one on top of the first one with increasing opacity.

For transforms, it's as simple as changing the current display matrix (modelview matrix in OpenGL lingo) to produce the desired effect.

Some things that have been in CSS prior to version 3 can also benefit from hardware acceleration; for example, to render anti-aliased glyphs, one could render text onto a texture at, say, 8 times the desired size, then use trilinear filtering (which, again, you basically get for free on 3D hardware) to scale it back down.

share|improve this answer
add comment

Your Answer


