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

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

回答2:

As stated in the accepted answer, mixins in CSS preprocessors have been state of the art to solve this problem some time ago.

But luckily times change and tools get better and better. Frameworks like Bootstrap switched to tools like autoprefixer which add vendor prefixes automagically to your css. This way you don't need to think a single second about vendor prefixes anymore and still you stay up-to-date.

Autoprefixer uses data from caniuse.com to keep itself up-to-date and you just need to specify which browsers you want to support and you don't need to care anymore. If you haven't switched to Grunt task automation yet, now it's time to give it a try, as there is a grunt-autoprefixer task available, too.

回答3:

Depending on your requirement, a library such as https://github.com/jQueryKeyframes/jQuery.Keyframes can also accomplish automatic prefixing by managing the keyframe syntax for you.

来源：https://stackoverflow.com/questions/15364081/is-there-a-short-way-to-list-css3-keyframes-with-vendor-prefixes

标签

css3

css-animations