Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.