[csswg-drafts] [css-easing] Allow `steps()` to accept an easing function as the `<step-position>` (#11970)

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

== [css-easing] Allow `steps()` to accept an easing function as the `<step-position>` ==
Recently Vasilis [asked](https://front-end.social/@vasilis@social.vasilis.nl/114174299342016142):

> Dearest CSS working group, I want to be able to define a transition between the steps in an animation-timing-function. Can you please fix this?

They needed this create the seconds hand of this clock which uses an `ease` between every second it ticks: https://vasilis.nl/clocks/station-clock/01/

As a workaround I [pointed](https://front-end.social/@bramus/114174411047664584) them to creating a bunch of keyframes and setting the `animation-timing-function` per keyframe, which they did, resulting in _a lot_ of code.:

```css
/* 
Very annoying, but this is, for now, the only way to 
transition between steps() in a keyframe animation.
Had to write out every percentage. 
*/
@keyframes ticking {
 0% {
  rotate: 0deg;
  animation-timing-function: ease;
 }
 1.66666666% {
  rotate: 6deg;
  animation-timing-function: ease;
 }
 3.33333333% {
  rotate: 12deg;
  animation-timing-function: ease;
 }
 …
 98.33333333% {
  rotate: 354deg;
  animation-timing-function: ease;
 }
 100% {
  rotate: 360deg;
  animation-timing-function: ease;
 }
}
.seconds {
  animation: ticking 58s linear;
}
```

_(Not sure why they chose `58s`, though)_

If [`steps()`](https://www.w3.org/TR/css-easing-2/#step-easing-function) were to accept another easing function as the `<step-position>`, the code could be simplified to the following:

```css
@keyframes ticking {
  to {
    rotate: 360deg;
  }
}

.seconds {
  animation: ticking 60s steps(60, ease);
}
```



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


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

Received on Thursday, 20 March 2025 21:30:16 UTC