CSS3转换和转换（Webkit）

考虑下面的小提琴

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); } 

转换在FF中平稳运行，但在Safari或Chrome（在我的Mac上）中完全没有转换。

是否有过渡属性的前缀或有我的代码中的某种语法错误？

Answer 1

在转换中添加供应商前缀：

 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); } 

更新（05/06/2014）

为了回答一些评论，省略-ms-transition的原因是它从来没有存在过。

检查：

我可以用吗？ 转换 ，

我可以用吗？ 转换 ，

MDN转换 ，

MDN转换