CSS3变换和转换（Webkit） [英] CSS3 transforms and transitions (Webkit)

问题描述

请考虑以下小提琴：
http://jsfiddle.net/6TMcS/

  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中没有任何转换，

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

  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; / *在这里改变* / 
 -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） / p>

要回答一些注释，省略 -ms-transition 的原因是它从未存在过。 p>

检查：

我可以使用？转换，

我可以使用吗？转换，

MDN转换，

MDN转换

Consider the following fiddle: http://jsfiddle.net/6TMcS/

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).

Has the transition property to be prefixed or is there some kind of syntax error in my code?

解决方案

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)

To answer some comments, the reason for omitting -ms-transition, is that it has never existed.

Check:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms

这篇关于CSS3变换和转换（Webkit）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！