There are numerous problems and browser inconsistencies with the current implementations of CSS Transitions, as demonstrated on csstransition.net. The following problematic situations can be solved by extensive use of
- animating an element right after displaying it,
- temporarily disabling transitions,
- animating the width/height of an element from or to “auto”.
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
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
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?