Browsers behave differently on CSS3 transitions

Good morning all.

Today I'm struggling with the following code: source on jsFiddle

What I have been trying to achieve is a seemingly simple image rollover effect where 'a mirror' of an image covers the original one using some css3 effects.

• Chrome 12 transforms the image perfectly
• Firefox 5 stops transformation when the image runs into mouse cursor
• IE开发者_开发百科9 - there is no transformation at all, the image is just shaking
• Opera - not checked

How do I do this cross-browser compatible?

I think I got it to work in Firefox 5 the way you want. See http://jsfiddle.net/X2eN6/7/

According to CanIUse.com, IE9 doesn't support CSS3 Transitions, so I guess that's why it's not working for you in IE9.

The browsers that support the feature are Firefox (from v4), Chrome, Safari and Opera. But it's worth pointing out that transitions currently require a vendor prefix in all browsers that support them.

A vendor prefix means one of two things: either the spec is not finalised yet, so the feature is subject to possible change in syntax, or else the browser's own support for the feature is not yet considered complete.

Chrome has been supporting transitions for ages, so it's no surprise that everything works there. Firefox has only recently added it, so since they require a vendor prefix, you should take that as a warning that things may not be guaranteed to work 100%.