CSS3转换和过渡（WebKit的）

Question

考虑以下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); 
} 

过渡平稳地工作在FF，但没有任何过渡都在Safari或Chrome（在我的Mac）。

是否将transition属性添加到前缀中，或者在我的代码中是否存在某种语法错误？

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

更新（2014年5月6日）

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

检查：

Can I Use? Transitions，

Can I Use? Transforms，

MDN transitions，

MDN transforms