CSS3变换和转换(的Webkit)(CSS3 transforms and transitions

2019-08-03 17:51发布

请看下面的小提琴

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

更新(2014年5月6日)

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

校验:

我可以用吗? 转变 ,

我可以用吗? 变换 ,

MDN的转变 ,

MDN变换



文章来源: CSS3 transforms and transitions (Webkit)