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

vrugtehagel has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations] The "via" keyframe selector ==
# Proposal: the `via` keyframe selector
## Problem
When we write CSS keyframe animations, especially large ones, it is not uncommon that we need to add or remove a keyframe. In a lot of cases, the keyframe selectors are evenly-spaced, so adding a keyframe requires us to edit every keyframe selector in that animation. For example, say we wrote:
```css
@keyframes rainbowText {
    from { color: red; }
    25% { color: orange; }
    50% { color: yellow; }
    75% { color: green; }
    to { color: blue; }
}
```
Now, we test it and see the orange is a bit ugly, and we want to remove it. We rewrite the above to
```css
@keyframes rainbowText {
    from { color: red; }
    33.333% { color: yellow; }
    66.667% { color: green; }
    to { color: blue; }
}
```
You now notice it's not very rainbow-ey, so want to try to re-add orange, but add purple too this time... You get the point.

There's two issues here:
 - We need to rewrite every keyframe selector whenever we want to add or remove a keyframe
 - We need to calculate and approximate decimal values (for example, the `66.667%` in the above example)

## Proposal
Here's my solution to this: the `via` keyframe selector. Essentially, it would linearly interpolate between the closest bounding absolutely specified keyframe selectors. Let me demonstrate by example.

## Example usage
The original `rainbowText` animation would end up looking like
```css
@keyframes rainbowText {
    from { color: red; }
    via { color: orange; }
    via { color: yellow; }
    via { color: green; }
    to { color: blue; }
}
```
Now, adding a keyframe is a breeze, because we don't need to worry about the keyframe selectors for the other keyframes. A little more of a complex example, showing how you can mix `via` and absolute keyframe selectors:
```css
@keyframes fadeInRainbowTextFadeOut {
    from { opacity: 0; }
    25% { opacity: 1; color: red; }
    via { color: orange; }
    via { color: yellow; }
    via { color: green; }
    50% { opacity: 1; color: blue; }
    to { opacity: 0; }
}
```
The `via` keywords interpolate between the bounding absolute keyframe selectors (`25%` and `50%), so it would be equivalent to
```css
@keyframes fadeInRainbowTextFadeOutSlow {
    from { opacity: 0; }
    25% { opacity: 1; color: red; }
    31.25% { color: orange; }
    37.5% { color: yellow; }
    43.75% { color: green; }
    50% { opacity: 1; color: blue; }
    to { opacity: 0; }
}
```
This would also allow for keyframe selectors like (I'll list them out here rather than making up a long animation to demonstrate) `[from, 10%, via, via, 40%, 52%, 70%, via, 80%, to]`, which would be equivalent to `[0%, 10%, 20%, 30%, 40%, 52%, 70%, 75%, 80%, 100%]`. 

## Links
Original discourse post (also by me): https://discourse.wicg.io/t/proposal-css-keyframes-via-keyword/5219
Relevant part of the spec: https://drafts.csswg.org/css-animations/#typedef-keyframe-selector

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6151 using your GitHub account


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

Received on Friday, 26 March 2021 17:38:23 UTC