-webkit- vs -moz-transition

Question

I am using CSS3 transitions on my site and the -webkit- seems to be working, whilst the -moz- is not.

Here is the CSS:

article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; }

.mousedown{-webkit-transform: translate(-180px, 0) !important; -moz-transform: translate(-180px, 0) !important; }

Just using jQuery to add the mousedown class onto the article.

Any idea where I am going wrong?

Answer 1

Firefox 4 and above supports -moz-transition. See the documentation page.

Answer 2

Currently, transitions aren't supported on CSS transforms in Mozilla.

https://developer.mozilla.org/en/CSS/CSS_transitions

Answer 3

Support for -moz-transition has been added in Gecko 1.9.3 (Firefox 3.7), so right now -moz-transition will only work in a Firefox 3.7 alpha release or Minefield (Firefox nightly build).

Answer 4

UPDATE: see comments. Support for -moz-transition has now been added. Yay!

There is no such thing as -moz-transition (yet), sorry. Mozilla will do transforms, but webkit is still the only engine rendering transitions.

Answer 5

opera is supporting it since 10.5, and much better than webkit

Answer 6

CSS transitions, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.