Are CSS prefixed keyframes stackable? - 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.