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

I agree with @vrugtehagel about your proposal, @Loirooriol. Instead of bending the meaning of the percentages that way, integers would make much more sense in this case. Then the keyframes would be sorted by them, ascending, somewhat similar to what the `z-index` property does.

So, instead of

```css
@keyframes rainbowText {
    @end 4%;
    0% { color: red; }
    1% { color: orange; }
    2% { color: yellow; }
    3% { color: green; }
    4% { color: blue; }
}
```

you'd write something like

@keyframes rainbowText {
    0 { color: red; }
    10 { color: orange; }
    20 { color: yellow; }
    30 { color: green; }
    40 { color: blue; }
}
```

Then removing one keyframe or adding one in between would be less of a problem. Though that would mean that the keyframe positions are forced to be evenly spread between the lowest and the highest value and if you added more keyframes in between two keyframes, you'd still have to adjust one of them. Furthermore, @vrugtehagel's suggested syntax is less disruptive and integrates better with the exising `@keyframes` syntax.

@vrugtehagel Note that an `@keyframes` rule could also look like this:

```css
@keyframes x {
    90% { opacity: 1; }
    via { opacity: 0; }
    0% { opacity: 1; }
    50% { opacity: 0.5; }
}
```

(Not saying, anybody should actually write a rule in such a chaotic order. 😄)
So, a third solution for the order issue would be to make the whole `@keyframes` rule invalid when the order is mixed _and_ includes one or more `via` keyframes. Having said that, I probably wouldn't prefer that solution but rather one that handles this situation gracefully. Though I don't have a strong opinion for one of the two you mentioned. I just wanted to point out that this case needs to be handled. And there might also be other ways to handle them.

Another case that needs to be specified is what happens when a `via` keyframe is placed at the beginning or the end of an `@keyframes` rule.  
Possible solutions I see here are
1. making the whole `@keyframes` rule invalid. (Again, not my favorite, rather mentioning it for completeness.)
2. letting `via` resolve to 0% at the beginning and 100% at the end of the `@keyframes` rule.
3. letting `via` keyframe rules interpolate between 0% and the first percentage keyframe.
4. making the `via` keyframe rule invalid.

In this case, I'd prefer option 3, as it is the nearest to what was suggested.

Sebastian

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


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

Received on Tuesday, 30 March 2021 19:56:33 UTC