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

从我对this similar question的回答：

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

（Chrome 36中未预先设置转换；动画在Chrome 43之前未预先添加动画。两个功能均为unprefixed simultaneously in Safari 9，因此您无需担心Safari中存在前缀/未前缀的重叠。）

简而言之，尽管您的两个示例没有提供完全相同的功能，但是@-webkit-keyframes中没有任何未添加前缀的属性毫无意义，因为大多数依赖前缀规则的WebKit浏览器永远都不会这样做。需要没有前缀的属性。具体来说，来自our chat discussion：

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

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

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

因此，您仅需要两个代码示例。它比代码示例一个小，并且没有功能丧失。 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非常适合那些不想担心前缀或进行所有研究以真正优化样式表的人

如果要优化样式表，则需要进行大量研究，以找出需要前缀的地方和不需要前缀的地方，需要无前缀声明的地方以及可以将其省略的地方，等等。。前缀都是一种痛苦；）

Answer 2

不。所有现代浏览器，甚至可以追溯到IE10，都支持无前缀的动画。（source）

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

2 个答案: