CSS3 Transition not working in IE, Firefox, Opera and Safari

Question

For some reason I can't get the transitions to work.

There is supposed to be a transition when you hove over either section. Code is there, but it'll only work in Chrome.

Am I doing something wrong?

---

This is just on of the transitions that wont work.

-webkit-transition-property: translateY, skew; 
-webkit-transition-duration: 0.5s, 0.5s; 
-webkit-transition-timing-function: ease-in-out, ease;
-webkit-transition-delay: 0.02s;
-moz-transition-property: translateY, skew; 
-moz-transition-duration: 0.5s, 0.5s; 
-moz-transition-timing-function: ease-in-out, ease;
-moz-transition-delay: 0.02s;
-ms-transition-property: translateY, skew; 
-ms-transition-duration: 0.5s, 0.5s; 
-ms-transition-timing-function: ease-in-out, ease;
-ms-transition-delay: 0.02s;
-o-transition-property: translateY, skew; 
-o-transition-duration: 0.5s, 0.5s;
-o-transition-timing-function: ease-in-out, ease;
-o-transition-delay: 0.02s;
transition-property: translateY, skew;
transition-duration: 0.5s, 0.5s; 
transition-timing-function: ease-in-out, ease;
transition-delay: 0.02s;
-webkit-transform: translateY(-210%) skew(60deg); 
-moz-transform: translateY(-210%) skew(60deg);
-ms-transform: translateY(-210%) skew(60deg);  
-o-transform: translateY(-210%) skew(60deg); 
transform: translateY(-210%) skew(60deg); 

Answer 1

You should use transform as transition property. Also, you should pair prefixed properties and values:

-prefix-transition-property: -prefix-transform;
transition-property: transform;

Also, check browser support for this: http://caniuse.com/#search=transition%7Ctransform Depending on required browser support you can drop some prefixes (most likely all, except -webkit- ).

Demo: http://jsfiddle.net/RUbXu/1/

Answer 2

transition should have transform in it, not the individual components of the transformation.

Note that the only vendor extension you need at this time is -webkit-transform . Check http://caniuse.com/ for compatibility.