[css-easing] Non-linear step easing

[jakearchibald]

step() is useful for reducing the resolution of an animation, but it always applies to linear easing. It'd be nice if step() could take another easing function, so you could apply steps to, say, ease-in-out, or a custom easing function.

[birtles]

That's a good idea. You can sometimes achieve this using Web Animations by overlapping the easing on the effect with the easing on individual keyframes.

box.animate({
  transform: ['none', 'translate(200px)'],
  easing: 'ease-out'
}, {
  duration: 1000,
  iterations: Infinity,
  easing: 'steps(5)'
});

(You really shouldn't need the none in the transform list, though. I guess something's wrong with the Web Animations keyframe processing where it doesn't apply easing to implicit keyframes?)

[jakearchibald]

Ohhh interesting! I guess I expected it to behave like CSS animations where one overrides the other, but the Web Animations system makes more sense I think.

[Loirooriol]

What about saying

<easing-function> = linear | [<cubic-bezier-easing-function> | <step-easing-function>]+

And then the final easing function is the composition of the specified functions?

[birtles]

That's an interesting idea.

We should probably make sure it integrates with whatever approach we decide on in #229 since I think at one point the proposal there was that a series of timing functions would actually represent a chain of timing functions rather than a stack.