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

> Anyway, while I do really like the concept of being able to "invert" the keyframe definition as LeaVerou suggested, I would again lean towards that being a separate proposal.

I agree with that.

For what it's worth, a keyword could also be used for that syntax instead of the semicolon, e.g.

```css
@keyframes rainbowText {
 color {
  values: red to orange to yellow to green to blue;
 }

 opacity {
  values: 0 to 1 to .5;
 }
}
```

That's probably not as readable as using an existing separator in some cases but wouldn't conflict with existing syntax.

> ```css
> @keyframes wiggleAndRainbow {
>     from {color: black; }
>     via { color: red; }
>     via { color: blue; }
>     via { color: yellow; }
>     via { color: green; }
>     to { color: black; }
> 
>     from { left: 0; }
>     via { left: -10px; }
>     via { left: 10px; }
>     via { left: -10px; }
>     to { left: 0; }
> }
> ```

Having multiple animations within one `@keyframes` rule is also out of scope for this proposal, I'd say. Also, it isn't needed. The current logic allows to combine multiple animations using the `animation` property. So you would split both animations into separate rules like this:

```css
> @keyframes rainbow {
>     from {color: black; }
>     via { color: red; }
>     via { color: blue; }
>     via { color: yellow; }
>     via { color: green; }
>     to { color: black; }
> }
>
> @keyframes wiggle {
>     from { left: 0; }
>     via { left: -10px; }
>     via { left: 10px; }
>     via { left: -10px; }
>     to { left: 0; }
> }
```

And then animate them individually within `animation`. Furthermore, with [`animation-composition`](https://drafts.csswg.org/css-animations-2/#animation-composition) they can be combined the way you suggest in your example with the percentages.

Sebastian

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


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

Received on Monday, 10 January 2022 12:37:59 UTC