Open
Description
Recently Vasilis asked:
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 them to creating a bunch of keyframes and setting the animation-timing-function per keyframe, which they did, resulting in a lot of code.:
/*
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() were to accept another easing function as the <step-position>, the code could be simplified to the following:
@keyframes ticking {
to {
rotate: 360deg;
}
}
.seconds {
animation: ticking 60s steps(60, ease);
}