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

css, css-animations

Solution

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

Problem

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

Original source