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

Re: [csswg-drafts] [web-animations-2] Allow keyframe to specify multiple offsets

From: Brian Birtles via GitHub <sysbot+gh@w3.org>
Date: Tue, 05 Dec 2017 04:41:26 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-349193683-1512448885-sysbot+gh@w3.org>
_From @Martin-Pitt on November 22, 2017 17:21_

I feel like as if array-based offsets are quite explicit that they should be skipped and merged later in via a second pass. Rather than trying to figure out a complex algorithm that would weave them in-between implicit keyframes.

Kinda like how in css a `position: relative`/`absolute` element is rendered after all the `position: static` elements.

So, given an original keyframe list of:
```
var input = [
        { opacity: 1, offset: [.2, .4, .6, 1] },
        { opacity: .2, offset: [.3, .7] },
        { opacity: 0  },
        { opacity: .5  },
        { opacity: 0  }
];
```


We'd compute following keyframes: (picking up all the non-array and implicit keyframes)
```
var first = [
        { opacity: 0, offset: 0 },
        { opacity: .5, offset: .5 },
        { opacity: 0, offset: 1 }
];
```


Generate the keyframes of the array-based offsets:
```
var second = [
        { opacity: 1, offset: .2 },
        { opacity: .2, offset: .3 },
        { opacity: 1, offset: .4 },
        { opacity: 1, offset: .6 },
        { opacity: .2, offset: .7 },
        { opacity: 1, offset: 1 }
];
```


Then merge the two arrays to get the following computed keyframes:
```
var computed = [
        { opacity: 0, offset: 0 },
        { opacity: 1, offset: .2 },
        { opacity: .2, offset: .3 },
        { opacity: 1, offset: .4 },
        { opacity: .5, offset: .5 },
        { opacity: 1, offset: .6 },
        { opacity: .2, offset: .7 },
        { opacity: 1, offset: 1 }
];
```




This seems more mechanically easier to reason about in my opinion, but I'd like to hear your thoughts?

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2060#issuecomment-349193683 using your GitHub account
Received on Tuesday, 5 December 2017 04:41:30 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:44 UTC