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

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 中包含前缀为css 的-webkit-？一个更简单的小版本也能同样工作吗？

@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

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

Answer 2

来自我对的回答：

WebKit-based browsers (including Opera 15 and later) still require the -webkit- prefix for animations today, and transforms are only unprefixed in recent versions of Chrome. You will need the prefix for both features.

（转换在 Chrome 36 中没有前缀；动画在 Chrome 43 之前没有取消前缀。这两个功能都是 unprefixed simultaneously in Safari 9 所以你永远不需要担心 prefixed/unprefixed 重叠在 Safari 中。）

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

You can lose the unprefixed [animation-timing-function] declaration. @keyframes is in the same family as the animation-* properties and no browser in existence supports one unprefixed without the other

As for transforms, only a very fringe few browsers simultaneously support unprefixed transforms and require prefixes on animations. These browsers do still support prefixed transforms, so similarly you can lose unprefixed transforms in @-webkit-keyframes

Note the difference between "support" and "require"

因此，您只需要代码示例二。它比代码示例 1 小 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的评论感兴趣：

I assume Autoprefixer sees that Chrome 36-42 supports unprefixed transforms but requires prefixed animations, so it puts transform in @-webkit-keyframes. I don't think that's a good approach. It needlessly doubles the transform declarations. All those versions of Chrome still understand -webkit-transform, so might as well stick to just that

Autoprefixer is good for those who just don't want to have to worry about prefixes or doing all the research needed to really optimize their stylesheets

If you want to optimize your stylesheet, you'll need to do quite a bit of research to find out where prefixes are needed and where they aren't, where unprefixed declarations are needed and where you can leave them out, etc. Prefixes are a pain either way ;)

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

Are browser prefixes required for all version of animation keyframes

css

css-animations

vendor-prefix