Note about CSS3 transition animations

If your animation doesn't seem to work, check the units used in the property that is not animating. For example: the width won't animate if the previous value is specified in pixels and the new value is in percentages.

This happened to me in RockMelt (version 0.9.68.1362, build 887eaf8). Mozilla's FireFox (7.0.1) seems to cope better with this situation and still do the animation.

For example, if you have something like this:

<style>#testAnim {
display: block;
-webkit-transition-duration: 1.7s;
-moz-transition-duration: 1.7s;
-o-transition-duration: 1.7s;
-ms-transition-duration: 1.7s;
transition-duration: 1.7s;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transition-property: border-radius;
-moz-transition-property: border-radius;
-o-transition-property: border-radius;
-ms-transition-property: border-radius;
transition-property: border-radius;
border-radius: 4px; padding: 25px; border: 1px solid red;
}
#testAnim:hover {border-radius: 50%}
#testAnim:focus {border-radius: 33px}
</style><a id="testAnim" href="#">Test by hovering</a>

Test by hovering and by tab'ing into this link. On some browsers the :hover won't animate but the :focus will

The CSS Transitions Module Level 3 spec doesn't seem to mention these kinds of situations