Question

adding css properties:

-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;

makes only firefox (version 12) act differently on jquery.animate()

just see the difference between clicking the two images on: http://jsfiddle.net/6Yj2f/1/

is there is an explanation to this behavior?

Answer 1

I’ve tried this with with chrome 21 and firefox 13, but I guess there will be a difference in all other browsers, and I thinks I would expect that.

What you have here is a sum of two eased “animations”, that’s why you’re having problems, and this is because jQuery changes width style gradually with an inline styling (where XX changes with time):

<img id="conflicted" class="handCard" src="https://path/to/image.jpg" style="display: inline-block; width: XXpx; ">

So, you are doing a 5 seconds transition just changing gradually width style of the object, this is fine if you don’t have CSS transition set, because browser won’t apply it’s own transition. But when you change width style gradually while also having a CSS transition ease (in your case set to 1 second linear ease), you’re making the browser ease every change on width style. If you set CSS transition ease at 0.1, you’ll see how as jQuery changes width style, browser also changes it, at it will be almost at the same time.

I found some interesting “enhaced $.animation()” that claims to “Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+”, didn’t try it myself, but hope you’ll find it useful.