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上)根本没有过渡。

我的过渡属性是否要添加前缀,或者我的代码中存在某种语法错误?

gregory asked 2020-08-06T17:16:50Z
1个解决方案
98 votes

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

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转换

Fábio Duque Silva answered 2020-08-06T17:17:25Z
translate from https://stackoverflow.com:/questions/13782277/css3-transforms-and-transitions-webkit