Re: [csswg-drafts] [web-animations-1] Additive transform animations easily invoke undesirable matrix interpolation

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