The CSS3 Transition spec (actually a working draft) hasn't yet answered to the question "What should happen when a value is changed midway through a transition?". Now that Firefox is joining Chrome, Safari and Opera in supporting this animation mechanism, it might be a good time to express our opinion.
Looking at animation features of javascript libraries,
I expect to be able to prematurely stop or complete an animation and have the callback be executed immediatly, using transitions too!
Following is a list of expecations and tests of browser behavior to start with.
Test cases have also been built for bugs found along the way.
Have a look, and join the discussion!
...creating a transition using javascript,
I expect the transition to happen.
In your browser it
How?
...the transition is complete,
I expect the transitionend event to fire.
In your browser it
How?
...setting the duration to 0 during a transition,
I expect the transition to complete immediatly.
In your browser it
How?
...setting the transition property list to none during a transition,
I expect the transition to complete immediatly.
In your browser it
How?
...the initial value of an animated property is 'auto'
I expect the property to be animated properly.
In your browser it
How?
...setting an animated style property to its current computed value,
I expect the transition of this property to stop where it is.
In your browser it
How?
...the transition of a style property has been stopped where it was and the property list is set to 'none',
I expect to be able to modify the style property immediatly.
In your browser it
How?
...the transition of a style property has been stopped where it was,
I expect the transitionend event to fire immediatly.
In your browser it
How?
...restarting a 2 seconds long transition stopped halfway through,
I expect the animation to last another 2 seconds (it should appear to slow down).
In your browser it
How?
...setting the transition property list to none during a transition,
I expect the transitionend event to fire (immediatly).
In your browser it
How?
...changing the duration to 0 instead of '0s' (no transition running),
I expect the change to take effect.
In your browser it
How?
...the transition duration of an element is set to 0 and the transition property list is empty,
I expect changes of style properties to take effect immediatly.
In your browser it
How?
This page is brought to you by @louis_remi and the code is available on github.