CODEWITHSUNDEEP
csswebkitmozillacss-transitions
theorise
theorise

Reputation: 7445

-webkit- vs -moz-transition

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?

Upvotes: 6

Views: 26478

Answers (6)

Arun Kumar
Arun Kumar

Reputation: 23

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.

Upvotes: -1

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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.

Upvotes: 2

samvermette
samvermette

Reputation: 40437

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

Upvotes: 11

joachim
joachim

Reputation: 11

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

Upvotes: 1

Radu
Radu

Reputation: 131

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).

Upvotes: 2

RabidZombie
RabidZombie

Reputation: 21

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

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

Upvotes: 2

Related Questions