Re: [csswg-drafts] [css-animations] The "via" keyframe selector (#6151)

Writing your keyframes out of order can be useful. Specifically, people tend to do this whenever blocks to different keyframes are the same; it allows you to entirely omit one of the blocks. Tabatkins shows a simple example, but it extends to bigger animations as well. This is a good point, though; if you have big animations, shortened by grouping some of the keyframes into lists of keyframes, then `via` becomes somewhat useless. You'd have to choose to either write them in order, and repeat the blocks, or not use `via` at all.

However, I still think `via` would be helpful. The above case is, as far as I know, pretty rare. Markhicken's doubt that anyone writes keyframes out of order would further support that. However, I decided to write my first-ever HTTP archive query to further back this statement.

Turns out, about 89.96% of all keyframe definitions are defined in the proper order. Tabatkins' example is, funnily enough, only the second most common case with 0.8%. The most common (at 1.3%) non-ordered animation is this:
```css
@keyframes mostCommonWeirdlyOrderedAnimation {
    0%, 60%, 75%, 90%, 100% { ... }
    0% { ... }
    60% { ... }
    75% { ... }
    90% { ... }
    100% { ... }
}
```
which looks like it could be `bounceInDown` from [animate.css](https://animate.style/) (though that's just a guess). These are technically not in order, but `via` would still be useful in cases like these.

Either way, just by the fact that only 10% of the keyframe animations are not in the correct order, I'd say `via` would still be a good addition to CSS. Even amongst the 10% there are still cases like the above case where `via` could be useful.

As far as a separate rule like `@sequential-keyframes` goes - it would indeed be blowing this out of scope a little. This proposal is intended to make the use of `@keyframes` more fluent, not to extend its possibilities. `via` is handy even for smaller, more straightforward animations. If you have ideas for a non-percentage based keyframe syntax, that should probably be its own proposal. Even then, it probably won't completely replace `@keyframes` so a little boost to `@keyframes`' usability will still make CSS better.

-- 
GitHub Notification of comment by vrugtehagel
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6151#issuecomment-1007291191 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 7 January 2022 10:15:22 UTC