1

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; }
}
Improve this question
5
  • 3
    How about simply giving it a quick try by yourself? Commented Sep 6, 2013 at 19:12
  • Even if they were unprefixed you wouldn't be able to stack them like that anyway. Commented Sep 6, 2013 at 19:15
  • Opening a question on Stack Overflow helps not only me, but also other people with the same question who don't have the time or possibility to actually test this. Commented Sep 6, 2013 at 19:15
  • Except for the part where asking on SO takes just as much time/effort as actually testing it. Commented Sep 6, 2013 at 19:31
  • But testing it on my own doesn't make the discussion/debate automatically public, thats the point Commented Sep 6, 2013 at 21:37

2 Answers 2

Reset to default
3

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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

4 Comments

These aren't selectors. These are at-rules. Unlike selectors, you can never group at-rules, prefixed or not.
@BoltClock I didn't realize that -- it's a good thing to know. Any docs that talk about this that you know of? No need to search if not, just wondering if you knew off the top of your head.
@brbcoding: Yep, here in the spec, under Malformed statements. You can also see it in the grammar that an at-rule specifically comprises exactly one at-keyword at a time. Note that you can nest certain at-rules inside the blocks of others, but you can't group them using a comma.
About your edit, this is where the distinction between a media query and the @media rule becomes significant: a @media rule can consist of one or more media queries, which you can group together just like selectors. See this question for an example: stackoverflow.com/questions/12306382/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.