W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2016

Re: [csswg-drafts] [css-transitions][css-animations] Complex timing functions

From: VisibleCode via GitHub <sysbot+gh@w3.org>
Date: Fri, 01 Jul 2016 05:46:22 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-229859105-1467351980-sysbot+gh@w3.org>
Additional observation: while you can muddle through with multiple 
keyframes and `cubic-bezier()` easings for most purposes, if you need 
smooth curves joined by a jump discontinuity, `@keyframes` as 
currently specified _can't_ be made to work. Best you can currently do
 to simulate such a jump discontinuity is to define two keyframes very
 close together and use a step easing between them:

```
@keyframes example {
    from {
        blah: 10px;
        animation-timing-function: cubic-bezier( ... stuff ... );
    }
    49.99999% {
        blah: 40px;
        animation-timing-function: step-end;
    }
    50% {
        blah: 100px;
        animation-timing-function: cubic-bezier( ... stuff ...);
    }
    to {
        blah: 150px;
    }
}
```

-- 
GitHub Notification of comment by visiblecode
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/229#issuecomment-229859105 
using your GitHub account
Received on Friday, 1 July 2016 05:46:31 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:00 UTC