W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2017

[csswg-drafts] [web-animations-2] Offset syntax

From: Brian Birtles via GitHub <sysbot+gh@w3.org>
Date: Tue, 05 Dec 2017 04:46:33 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-279244630-1512449192-sysbot+gh@w3.org>
birtles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-2] Offset syntax ==
_From @caub on August 10, 2016 23:48_

I don't think it's a good idea to mix `offset` between other css properties

```
el.animate([
    { background: '#ff004d', offset: 0 },
    { background: '#ff77ab', offset: 0.20 },
    { background: '#00e756', offset: 0.5 },
    { background: '#29adff', offset: 0.80 },
    { background: '#ff77ab', offset: 1 }
], {
    duration: 2000,
    direction: 'alternate',
    iterations: Infinity
});
```

In comparison below, it's not ideal (you could have both '0.2', '0.20' as keys), but it helps separating concerns

```
el.animate({
    '0': { background: '#ff004d' },
    '0.2': { background: '#ff77ab' },
    '0.5': { background: '#00e756' },
    '0.8': { background: '#29adff' },
    '1': { background: '#ff77ab' }
}, {
    duration: 2000,
    direction: 'alternate',
    iterations: Infinity
});
```


_Copied from original issue: w3c/web-animations#164_

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2064 using your GitHub account
Received on Tuesday, 5 December 2017 04:46:35 UTC

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