Re: [csswg-drafts] Interpolate values between breakpoints (#6245)

Hello, everyone!

Since we now have scroll- and view-timelines, maybe it makes sense to do something similar for this problem?
Like, **container-timelines**? They will allow to drive a regular CSS/Web animation using the size of a query container’s content-box.

A container timeline is created similarly to how a scroll/view-timeline is created:

```
#container {
  container: mycontainer inline-size;
  container-timeline: mytimeline inline-size;
}
```

And then the animation is set up as you would set up a scroll/view-timeline:

```
#target {
  animation: anim auto;
  animation-timeline: mytimeline;
}
```

And keyframe offsets will accept \<length\> values. The following defines an animation that takes place between 40em and 800px:

```
@keyframes anim {
  40em {
    color: green;
  }
  800px {
    color: red;
  }
}
```

So, overall:

```
container-timeline-name: #<dashed-ident>
container-timeline-axis: #[ block | inline | x | y ]
container-timeline-range: #[ <length> <length> ]
container-timeline: #[ <container-timeline-name> [ <container-timeline-axis>? || <container-timeline-range> ] ]
```

With container-timeline-range being min and max lengths for the progress of the animation.


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


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

Received on Tuesday, 5 September 2023 07:22:43 UTC