有一个简短的方法来列出CSS3关键帧与供应商前缀？ [英] Is there a short way to list CSS3 keyframes with vendor prefixes?

问题描述

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

At the moment I have to list all variations:

@-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); }
}

[…]

。有什么办法写这个短？这样的东西不会破坏它：

You get the idea. Is there any way to write this shorter? Something like this that is not breaking it:

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

推荐答案

code> CSS 预处理器，例如支持mixins概念的 LESS ，删除一些重复。

Not natively in CSS but you can accomplish this by using a CSS preprocessor, for example LESS which supports the concept of "mixins" to remove some duplication.

更多信息可以找到这里，具体来自文章的例子：

More info can be found here, specifically the example from the article:

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

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

这篇关于有一个简短的方法来列出CSS3关键帧与供应商前缀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！