CSS CSS3 转换和过渡 (Webkit)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13782277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transforms and transitions (Webkit)
提问by gregory
Consider the following fiddle
考虑以下小提琴
p {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transition: transform 1s ease-in;
-moz-transition: transform 1s ease-in;
-o-transition: transform 1s ease-in;
transition: transform 1s ease-in;
}
a:hover + p {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
The transition works smoothly in FF but there is no transition at all in Safari or Chrome (on my Mac).
过渡在 FF 中工作顺利，但在 Safari 或 Chrome（在我的 Mac 上）中根本没有过渡。
Has the transition property to be prefixed or is there some kind of syntax error in my code?
过渡属性是否有前缀或者我的代码中是否存在某种语法错误？
回答by Fábio Duque Silva
Add the vendor prefix in the transitions:
在转换中添加供应商前缀：
p {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transition: -webkit-transform 1s ease-in; /* Changed here */
-moz-transition: -moz-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
transition: transform 1s ease-in;
}
a:hover + p {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
Update (05/06/2014)
更新 (05/06/2014)
To answer some comments, the reason for omitting -ms-transition, is that it has never existed.
回答一些评论，省略的原因-ms-transition是它从未存在过。
Check:
查看：
