Monthly Archives: June 2012

Working around CSS Transitions bugs with getComputedStyle

There are numerous problems and browser inconsistencies with the current implementations of CSS Transitions, as demonstrated on The following problematic situations can be solved by extensive use of getComputedStyle():

Animating after display

Let’s say you have an element styled with display: none; left: 0; transition: left .5s; and you want to reveal it and animate its position.

Simply changing the style of the element to display: block; left: 100px; (function display_animate below) won’t work because the browser didn’t take the initial position of the element into account before changing it. You can force the browser to behave as expected by accessing the computed style of the element right after displaying it (function display_animate_fix below).

Muting transitions

What if an element is styled with display: none; left: 0; transition: left .5s; and you want to jump to a different position and animate it back to its origin.

The trick is to temporarily disable the transitions is to hide your element with display: none;, modify its style and then display it again (function jump_animate below). But as you might have guessed, this won't work unless you give the browser an opportunity to realize what's happening... by accessing the computed style of the element, once after hiding it, and once after revealing it (function jump_animate_fix below).

Note that it is also possible to temporarily set the element to transition: none;, in combination with two getComputedStyle, but this requires more code because of vendor prefixes.

Animation from/to auto

This is one of the most requested feature of CSS Transitions but it has never been spec.ed clearly. It doesn't work at all in Firefox (see associated bug) and Opera, Webkit guys tried to fix it but I think they made it worse, and IE10... I don't know.

Instead of detailing all the methods that don't work, I'll present the ones that do:

And you thought CSS Transitions would allow you to animate your pages without JS?