CSS3 Transition在IE，Firefox，Opera和Safari中无效

Question

由于某种原因，我不能让过渡工作。

当你徘徊在任何一个部分时，应该有一个过渡。 代码就在那里，但它只适用于Chrome。

难道我做错了什么？

---

这只是无法工作的过渡。

-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

您应该使用transform作为过渡属性。 此外，您应该对前缀属性和值进行配对：

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

另外，请检查浏览器支持： http ： //caniuse.com/#search=transition%7Ctransform根据所需的浏览器支持，您可以删除一些前缀（最有可能除了-webkit-之外的所有前缀）。

演示： http ： //jsfiddle.net/RUbXu/1/

Answer 2

transition应该在其中transform ，而不是transform的各个组成部分。

请注意，此时您需要的唯一供应商扩展是-webkit-transform 。 请查看http://caniuse.com/以获得兼容性。