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

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

为了澄清，我不是在问什么对我的特定网站有用，我是在问功能以及代码示例 2 是否与代码示例 1 一样。

谢谢。

Answer 1

来自我对this similar question的回答：

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

（在 Chrome 36 中，变换没有前缀；动画直到 Chrome 43 才没有前缀。这两个功能都是 unprefixed simultaneously in Safari 9，因此您无需担心 Safari 中的前缀/未前缀重叠。）

简而言之，虽然您的两个示例没有提供完全相同的功能，但在 @-webkit-keyframes 中包含任何无前缀属性是没有意义的，因为大多数依赖于前缀 at 规则的 WebKit 浏览器永远不会需要无前缀属性。具体来说，来自our chat discussion：

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

至于变换，只有极少数浏览器同时支持无前缀变换并且需要动画前缀。这些浏览器仍然支持带前缀的转换，所以同样你可以在@-webkit-keyframes 中丢失无前缀的转换

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

因此，您只需要代码示例 2。它比代码示例一小 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 上的 cmets 感兴趣：

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

Autoprefixer 非常适合那些不想担心前缀或进行真正优化样式表所需的所有研究的人

如果你想优化你的样式表，你需要做大量的研究来找出哪些地方需要前缀，哪些地方不需要，哪些地方需要无前缀声明，哪些地方可以省略，等等. 无论哪种方式，前缀都是一种痛苦;)

Answer 2

没有。所有现代浏览器，甚至可以追溯到 IE10，都支持无前缀动画。 (source)