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/以獲得兼容性。