CSS3转换和过渡（Webkit）

Question

请考虑以下示例

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

在火狐浏览器中，过渡效果很流畅，但在Safari或Chrome（我的Mac上）中根本没有过渡效果。

过渡属性需要添加前缀，还是我的代码存在某些语法错误？

- gregory

---

使用prefixfreejs可以让你的生活更轻松。 - Muhammad Umer

语法高亮看起来很奇怪（可能是语法高亮本身的问题）。 - Peter Mortensen

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? 过渡效果,

Can I Use? 转换效果,

MDN 过渡效果,

MDN 转换效果

- Fábio Duque Silva

---

当然，我只是添加了-webkit-前缀，因为你抱怨的是Safari和Chrome。你应该为-moz-和其余部分添加前缀，但根据你的说法，FF不需要它。 - Fábio Duque Silva

我就知道它一定能够工作，但是我没有找到任何直接的例子。最接近的是这个：http://css-infos.net/property/-webkit-transition-property，在这个链接中你可以看到，<name> 必须与 CSS 规则的名称相同...在这种情况下还带有供应商前缀。干杯！ - Fábio Duque Silva

将 transition 应用于 -ms-transform 怎么样？ - sompylasar

这是一个秘密策略，旨在人为地减少IE的功能集。 - Lodewijk

@sompylasar 嗯，我没有在 -ms-transform 上应用 transition，因为那基本上是不可能的。据我所知，-ms-transition 从未存在过。你只能在 IE >= 10 上使用 transition，并且 transform 也可在 IE >= 10 上使用。-ms-transform 仅用于 IE9。 CanIUse 过渡效果, CanIUse 转换, MDN 过渡效果, MDN 转换 - Fábio Duque Silva