[css-animations] Multiple identifiers per @keyframes rule

Use case: [1] (applying the same animation when a checkbox is checked AND unchecked). Many similar use cases exist, for each pseudo-class (I’ve come across this before for :hover and :not(:hover), as well as for :focus and probably more).

Being able to have multiple names per @keyframes rule would eliminate the duplication of having two identical @keyframes rules without forcing us to completely rethink animations to accomodate such use cases.

YES, it’s totally a hack, as the intent here is event-based animation. But the use cases are many and valid. Authors do need this, and the answer cannot be “Just learn JS and use WebAnim”. That’s a huge barrier there for non-programmers, who will instead resort to duplicating their @keyframes rule, because it’s simpler (especially if they’re using some sort of preprocessor). However, we also cannot completely rethink css-animations at this point. So, I think it’s a reasonable, easy to implement, compromise.

Thoughts?

[1]: http://dabblet.com/gist/24c756eb35a67e34d7a9 <http://dabblet.com/gist/24c756eb35a67e34d7a9>

Lea Verou ✿ http://lea.verou.me ✿ @leaverou