[英]CSS3 Transition not working in IE, Firefox, Opera and Safari
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.
代码就在那里,但它只适用于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);
You should use transform
as transition property. 您应该使用
transform
作为过渡属性。 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-
). 另外,请检查浏览器支持: http : //caniuse.com/#search=transition%7Ctransform根据所需的浏览器支持,您可以删除一些前缀(最有可能除了
-webkit-
之外的所有前缀)。
Demo: http://jsfiddle.net/RUbXu/1/ 演示: http : //jsfiddle.net/RUbXu/1/
transition
should have transform
in it, not the individual components of the transformation. transition
应该在其中transform
,而不是transform
的各个组成部分。
Note that the only vendor extension you need at this time is -webkit-transform
. 请注意,此时您需要的唯一供应商扩展是
-webkit-transform
。 Check http://caniuse.com/ for compatibility. 请查看http://caniuse.com/以获得兼容性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.