1

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

2 回答 2

3

不是原生在 CSS 中，但您可以通过使用 CSS 预处理器来完成此操作，例如 LESS，它支持“mixins”的概念以删除一些重复。

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

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

.mixi-frames () {
opacity:0;
}
于 2013-09-06T19:13:12.543 回答
1

不幸的是，它不起作用。如果您对选择器进行分组，则它们都必须有效才能使它们中的任何一个有效。

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

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

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

Travis 在另一个答案中的预处理器解决方法可能是按照您的意愿干净地编写它的最佳方法。

编辑：这是错误的，这些永远不能分组，因为它们是规则，而不是选择器。媒体查询 (@media)、@font-face 等显然也是如此。请查看下面 Boltclock 的评论。

于 2013-09-06T19:16:38.120 回答