Is there a short way to list CSS3 keyframes with vendor prefixes?

Question

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

Answer 1

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