Question

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

@-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 {}

Answer 1

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

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

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

.mixi-frames () {
    from {width: 254px;}
    to {width: 512px;}
}

Answer 2

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

但幸运的是，时代的变化和工具变得越来越好。像Bootstrap这样的框架切换到像autoprefixer这样的工具，可以自动为您的css添加供应商前缀。通过这种方式，您不再需要考虑供应商前缀的一秒钟，并且仍然保持最新状态。

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

Answer 3

根据您的要求，https://github.com/jQueryKeyframes/jQuery.Keyframes等库也可以通过为您管理关键帧语法来实现自动添加前缀。

是否有一个简短的方法来列出带有供应商前缀的CSS3关键帧？

3 个答案: