Question

CSS前缀关键帧是否可以叠加，只要它们中不包含任何带前缀的特定属性？

常见

@-webkit-keyframes myAnimation{
   to{ opacity:0; }
}
@-moz-keyframes myAnimation{
   to{ opacity:0; }
}
@keyframes myAnimation{
   to{ opacity:0; }
}

堆积

@-webkit-keyframes myAnimation, @-moz-keyframes myAnimation, @keyframes myAnimation{
   to{ opacity:0; }
}

Answer 1

在CSS中不是原生的，但你可以通过使用CSS预处理器来实现这一点，例如LESS支持“mixins”的概念来删除一些重复。

可在此处找到更多信息，特别是文章中的示例：

 @-webkit-keyframes myAnimation {.mixi-frames;}
 @-moz-keyframes myAnimation {.mixi-frames;}

.mixi-frames () {
opacity:0;
}

Answer 2

不幸的是，它无法运作。 If you group selectors, all of them have to be valid in order for any of them to be.

例如，如果您使用了堆叠的示例......

@-webkit-keyframes myAnimation, @-moz-keyframes myAnimation, @keyframes myAnimation{
   to{ opacity:0; }
}

...在Firefox上，它会将webkit前缀选择器视为无效，这将使其余部分（包括-moz-前缀选择器）也无效。

特拉维斯在另一个答案中的预处理器解决方案可能是你想要干净利落地编写它的最好方法。

编辑：这是错误的，这些永远不会被分组，因为它们是规则，而不是选择器。同样适用于媒体查询（@media），@ font-face等。请查看下面的Boltclock评论。

CSS前缀关键帧是否可堆叠？

常见

堆积

2 个答案: