所有版本的动画关键帧都需要浏览器前缀吗

Question

如果设计师使用精美的 css 动画并希望在旧版和新版浏览器中具有功能，我们通常会创建一个 @keyframes 和 @-webkit-keyframes 部分。我见过的大多数示例在两个关键帧下都使用无前缀和浏览器前缀的 css，但这有必要吗？

@keyframes coolEffect {
  -webkit-transform: some value;
  transform: some value;
  -webkit-animation-timing-function: some value;
  animation-timing-function: some value;
}
@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  transform: some value;
  -webkit-animation-timing-function: some value;
  animation-timing-function: some value;
}

我们是否需要 @-webkit-keyframes 中的非前缀值，因为使用它的浏览器也会使用 -webkit- 前缀的 css？同样，由于我们使用@-webkit-keyframes，我们是否需要在主@keyframes中包含-webkit-前缀的css？更简单的较小版本也能同样工作吗？

@keyframes coolEffect {
  transform: some value;
  animation-timing-function: some value;
}
@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  -webkit-animation-timing-function: some value;
}

澄清一下，我并不是在问什么对我的特定网站有用，而是在问功能以及代码示例二是否与代码示例一相同。

谢谢。

Answer 1

从我对这个类似问题的回答来看：

• 如今，基于 WebKit 的浏览器（包括 Opera 15 及更高版本）仍然需要-webkit-动画前缀，并且仅在最新版本的 Chrome 中才没有转换前缀。您将需要这两个功能的前缀。

（变换在 Chrome 36 中没有前缀；动画直到 Chrome 43 才没有前缀。这两个功能在 Safari 9 中同时没有前缀，因此您永远不需要担心 Safari 中带前缀/不带前缀的重叠。）

简而言之，虽然您的两个示例不提供完全相同的功能，但没有必要包含任何无前缀的属性，因为@-webkit-keyframes大多数依赖于带前缀的 at 规则的 WebKit 浏览器永远不会需要无前缀的属性。具体来说，根据我们的聊天讨论：

您可能会丢失无前缀的 [animation-timing-function] 声明。@keyframes 与animation-*属性属于同一家族，并且现有的浏览器不支持其中一个没有前缀而没有另一个的属性

至于变换，只有极少数浏览器同时支持无前缀变换并需要动画前缀。这些浏览器仍然支持带前缀的转换，因此类似地，您可能会丢失 @-webkit-keyframes 中的无前缀转换

注意“支持”和“要求”之间的区别

因此，代码示例二就是您所需要的。它比代码示例一小40% 以上，且功能没有损失。40%是一个大问题。我要做的唯一改变是将@-webkit-keyframes规则向上移动：

@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  -webkit-animation-timing-function: some value;
}
@keyframes coolEffect {
  transform: some value;
  animation-timing-function: some value;
}

读者可能还对我对 Autoprefixer 的评论感兴趣：

我假设 Autoprefixer 发现 Chrome 36-42 支持无前缀变换，但需要有前缀的动画，因此它将变换放在 @-webkit-keyframes 中。我认为这不是一个好方法。它不必要地使转换声明加倍。所有这些版本的 Chrome 仍然理解 -webkit-transform，所以不妨坚持这一点

Autoprefixer 对于那些不想担心前缀或不想进行真正优化样式表所需的所有研究的人来说很有用

如果你想优化你的样式表，你需要做大量的研究来找出哪里需要前缀，哪里不需要，哪里需要无前缀声明，哪里可以省略它们，等等。无论哪种方式都很痛苦；）