I'm still new to HTML5 but I faced a very strange behavior. (In Chrome)
The following code works on chrome:
Webkit-transition testThis is an old span
However if I move the line:
document.getElementById("t47").className += "letter";
to the beginning of the moveIt function, the span just jumps without transitioning
So What is the difference here? These two cases work well on firefox though. I haven't tried IE.
I appreciate any help I can get!
From the CSS Transitions specification:
... changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.
In your alternative version, you change the
className and update the
transform without allowing the browser to calculate the consequences of the change to the
className. (This typically happens when you return control to the event loop.) Therefore, the browser may still be operating from the old value of the
transition property (which is the default value of
all 0s ease 0s). If that occurs, then the property change takes place immediately with no animation since the delay and duration are
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here