CSS前缀关键帧是否可堆叠？

Question

Are CSS prefixed keyframes stackable as long as they don't include any prefixed specific attributes in them?

Common

@-webkit-keyframes myAnimation{
   to{ opacity:0; }
}
@-moz-keyframes myAnimation{
   to{ opacity:0; }
}
@keyframes myAnimation{
   to{ opacity:0; }
}

Stacked

@-webkit-keyframes myAnimation, @-moz-keyframes myAnimation, @keyframes myAnimation{
   to{ opacity:0; }
}

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 myAnimation {.mixi-frames;}
 @-moz-keyframes myAnimation {.mixi-frames;}

.mixi-frames () {
opacity:0;
}

Answer 2

It wouldn't work unfortunately. If you group selectors, all of them have to be valid in order for any of them to be.

For instance, if you used your stacked example...

@-webkit-keyframes myAnimation, @-moz-keyframes myAnimation, @keyframes myAnimation{
   to{ opacity:0; }
}

... on Firefox, it would read the webkit prefixed selector as invalid, which would make the rest of it, including the -moz- prefixed selector, also invalid.

Travis' preprocessor workaround in the other answer is probably the best way to write it cleanly as you'd like.

EDIT: This is misinformed, these can never be grouped as they are at-rules, not selectors. Same obviously goes for media queries (@media), @font-face, etc. Check out Boltclock's comment below.