Re: [csswg-drafts] [css-easing-2] Complex easing/timing functions (#229)

> What I'm more concerned about is when f(0) != 0 or f(1) != 1. There certainly used to be places where we assumed that. With step-start you can already have f(0) != 0 but only when the "before flag" is false.
> 
> I recall that in the past that invariant proved useful but perhaps it's fine now. (It may have been when we were trying to chain timing functions together, or when we were trying to invert them in order to work out when to dispatch events -- but we don't do either of those things anymore).

It'd be worth grounding out on whether there are any lingering issues with lifting this restriction, for both Gecko and WebKit. As long as the restriction is in place, there's a whole family of complex animations left that can't be expressed except the "long way", with multiple keyframes.

For example:

![Screenshot_2019-05-14 cubic-spline()(1)](https://user-images.githubusercontent.com/17750010/57724391-8f421280-763f-11e9-9bf5-6afdd47eee7a.png)

Without the requirement that f(0) == 0 and f(1) == 1, this animation could be expressed the same way as other complex animations (using the gradient-style strawman syntax):

```
@keyframes bouncy {
    0% {
        transform: translate(0px);
        animation-timing-function: cubic-spline(0, 1, 0 33%, 0 33%, 0.33, 0 66%, 0 66%, 0.11, 0);
    }
    100% {
        transform: translate(90px);
    }
}
```

But, if the restriction were in force, for certain animations like this one you'd be forced to fall back to something like:

```
@keyframes bouncy {
    0% {
        transform: translate(0px);
        animation-timing-function: cubic-spline(0, 1 0);
    }
    16% {
        transform: translate(90px);
        animation-timing-function: cubic-spline(1 0, 0);
    }
    33% {
        transform: translate(0px);
        animation-timing-function: cubic-spline(0, 1 0);
    }
    49% {
        transform: translate(30px);
        animation-timing-function: cubic-spline(1 0, 0);
    }
    66% {
        transform: translate(0px);
        animation-timing-function: cubic-spline(0, 1 0);
    }
    82% {
        transform: translate(10px);
        animation-timing-function: cubic-spline(1 0, 0);
    }
    100% {
        transform: translate(0px);
    }
}
```

(There's still a somewhat shorter way to write this, which I'll leave as an exercise for the reader because it requires a re-parameterization that's annoying to do by hand.)


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

Received on Tuesday, 14 May 2019 19:02:59 UTC