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

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

From: VisibleCode via GitHub <sysbot+gh@w3.org>
Date: Mon, 08 Aug 2016 00:34:47 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-238119364-1470616485-sysbot+gh@w3.org>
Let's say we strip down my original syntax proposal a little bit:

```
<timing-function-segment> = <single-timing-function> [<number> 
<number>]?
<timing-function-segment-end> = [until | through]? <percentage>
<timing-function-extra-segment> =
    <timing-function-segment-end> <timing-function-segment>
<complex-timing-function> =
    <timing-function-segment> <timing-function-extra-segment>*
<timing-function> = [<single-timing-function> | 
<complex-timing-function>]#
```

This definition of `<timing-function>` is more compatible with the 
existing definition, which uses commas to support the multiple 
animation use case which @Martin-Pitt pointed out.

To reduce the verbosity a little, I've also replaced range() with a 
simple pair of numbers. "at" and "after" have also become "until" and 
"through", since without the commas it seems to read better if things 
are worded in terms of the end of the preceding segment instead of the
 start of the following one.

So with this syntax, my earlier example:

animation-timing-function: ease-in range(0.0, 0.3), at 40% ease-out 
range(0.3, 0.1), after 70% cubic-bezier(... stuff ...) range(0.6, 
1.0);

would instead be:

animation-timing-function: ease-in 0.0 0.3 until 40% ease-out 0.3 0.1 
through 70% cubic-bezier(... stuff ...) 0.6 1.0;

-- 
GitHub Notification of comment by visiblecode
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/229#issuecomment-238119364 
using your GitHub account
Received on Monday, 8 August 2016 00:34:56 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:22 UTC