代码之家 › 专栏 › 技术社区 › Tom

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

vendor-prefix css-animations css

-1

Tom · 技术社区 · 6 年前

@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关键帧中的非前缀值,因为使用它的浏览器也会使用-webkit前缀css?同样地,既然我们使用的是@-webkit关键帧,那么我们是否需要在主@关键帧中包含带有-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相同。

谢谢。

2 回复 | 直到 6 年前

Community CDub 5 年前

从我的回答到 this similar question :

基于WebKit的浏览器(包括Opera 15和更高版本)仍然需要 -webkit- 今天的动画前缀和变换只有在Chrome的最新版本中才是不固定的。两个功能都需要前缀。

(在Chrome36中,变换是不固定的;在Chrome43之前,动画并不是不固定的 unprefixed simultaneously in Safari 9

简而言之,虽然您的两个示例没有提供完全相同的功能,但是在中包含任何不固定的属性是没有意义的 @-webkit-keyframes our chat discussion

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

小40%以上 比代码示例一不大的处理。我唯一要做的改变就是规则化:

@-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看到chrome36-42支持不固定的变换,但需要前缀动画,所以它将变换放在@-webkit关键帧中。我觉得这不是个好办法。它不必要地将转换声明加倍。所有这些版本的Chrome仍然能够理解webkit的转换,所以不妨坚持这一点

Autoprefixer对于那些不想担心前缀或者做所有需要的研究来真正优化他们的样式表的人来说是很好的

如果你想优化你的样式表,你需要做大量的研究来找出哪里需要前缀,哪里不需要前缀,哪里需要不固定的声明,哪里可以省略它们,等等