CODEWITHSUNDEEP
css
gespinha
gespinha

Reputation: 8487

Are CSS prefixed keyframes stackable?

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

Upvotes: 1

Views: 120

Answers (2)

Jason
Jason

Reputation: 3360

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.

Upvotes: 1

Travis
Travis

Reputation: 2245

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

Upvotes: 3

Related Questions