CODEWITHSUNDEEP
htmlcss
Dane Iracleous
Dane Iracleous

Reputation: 1759

Why isn't my CSS transition working on the transform: matrix3d property?

When I set an element's transition to:

transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-webkit-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-moz-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;

The element does not animate when its transform: matrix3d property changes.

Is this supported? Mozilla says the transform property can be used in a transition (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties)

Why is it not working for me?

I set up a fiddle: http://jsfiddle.net/diracleo/aFudH/1/

Upvotes: 0

Views: 681

Answers (2)

WooCaSh
WooCaSh

Reputation: 5212

I change your code little to this and it seems to working: 

transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;

http://jsfiddle.net/aFudH/2/

Upvotes: 1

t.niese
t.niese

Reputation: 40842

In your css rule you wrote this:

transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-webkit-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-moz-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;

But for the properties that should be transformed you should use the corresponding vendor prefix that matches the one of the transition (if a vendor prefix is required for that property).

So it has to look like this:

transition: transform 1s;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;

Upvotes: 2

Related Questions