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

@tabatkins @fantasai Here is how I was planning on using this property to realize all my needs:

```css
h1 {
  animation: h1 1s ease-in-out both paused 1;
  --from: 20rem;
  --to: 60rem;

  /* What I currently use (Safari only, I have another fallback for other browsers) */
  animation-delay: calc(-1s * (100cqi - var(--from)) / (var(--to) - var(--from)));

  /* What I will use with this new function */
  animation-delay: calc(-1s * container-progress(inline-size, var(--from), var(--to)));
}
@keyframes h1 {
  0% {
    font-size: 1rem;
    line-height: 1.2;
    color: lime;
  }
  50% {
    color: aqua;
  }
  100% {
    font-size: 5rem;
    line-height: 1;
    color: hotpink;
  }
}
```

This allows for multiple breakpoints, easing, and interpolating multiple properties at once as I rarely interpolate just a single property. Probably still more of a hack than most people are comfortable with, but it works well and the complexity of it is easily abstracted.

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


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

Received on Monday, 18 November 2024 13:18:54 UTC