6

目前我必须列出所有变体：

@-webkit-keyframes show {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.8); }
}

@-moz-keyframes show {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.8); }
}

[…]

你明白了。有什么办法可以写得更短吗？像这样并没有破坏它的东西：

@-webkit-keyframes show, @-moz-keyframes show {}
4

3 回答 3

6

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

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

@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}

.mixi-frames () {
    from {width: 254px;}
    to {width: 512px;}
}
于 2013-03-12T14:37:08.363 回答
2

正如已接受的答案中所述，CSS 预处理器中的 mixin 已成为解决此问题的最先进技术。

但幸运的是，时代变了，工具变得越来越好。像Bootstrap这样的框架切换到像autoprefixer这样的工具，它会自动将供应商前缀添加到你的 CSS 中。这样，您无需再考虑供应商前缀，而且您仍然可以保持最新状态。

Autoprefixer 使用来自caniuse.com的数据来保持自己的最新状态，您只需要指定要支持的浏览器，您就无需再关心了。如果您还没有切换到Grunt任务自动化，现在是时候尝试一下了，因为也有一个可用的grunt-autoprefixer任务。

于 2014-08-04T21:36:08.793 回答
0

根据您的要求，诸如https://github.com/jQueryKeyframes/jQuery.Keyframes之类的库也可以通过为您管理关键帧语法来完成自动前缀。

于 2014-03-17T09:38:13.637 回答