- From: Brian Birtles via GitHub <sysbot+gh@w3.org>
- Date: Tue, 10 Apr 2018 16:08:17 +0000
- To: public-css-archive@w3.org
A further thought, I think we may need a neutral value concept in the API anyway. For example, consider the following CSS animation: ```css div { animation: move-right 2s steps(5); } @keyframes move-right { to { margin-left: 100px; } } ``` When you call `div.getAnimations()[0].effect.getKeyframes()` what do you get? You might expect just `[ { marginLeft: '100px', offset: 1 } ]` but how do you represent the timing function? Bear in mind that CSS animations don't allow effect-level easing, only keyframe-level easing. Furthermore, each keyframe can have different easing. i.e. you could also have: ```css @keyframes move-right { from { margin-top: 0px; animation-timing-function: ease } to { margin-left: 100px; margin-top: 100px; } } ``` (i.e. the `margin-top` animation uses `ease` while the `margin-left` animation uses `steps(5)`) So I wonder if we want `getKeyframes()` to return something like: ```js [ { marginLeft: null, easing: 'steps(5)', offset: 0 }, { marginTop: '0px', easing: 'ease', offset: 0 }, { marginLeft: '100px', marginTop: '100px', offset: 1 }, ] ``` i.e. return a `null` value? Or use `marginLeft: 0px` with `composite: add`? This is a pretty complex issue once you introduce CSS variables and from memory I think I found there might be a need for expressing both a value that represents the underlying value (previous in the stack) and a value that represents the base value (bottom of the stack). For my own records I wrote a few comments about this on [Mozilla bug 1268858](https://bugzilla.mozilla.org/show_bug.cgi?id=1268858#c19). -- GitHub Notification of comment by birtles Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2204#issuecomment-380157461 using your GitHub account
Received on Tuesday, 10 April 2018 16:08:20 UTC