[csswg-drafts] [web-animation] Compositing animations with empty keyframes is not defined (#4543)

shengha2 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animation] Compositing animations with empty keyframes is not defined ==
### Problem 
We use the same html [test_animation.html.tar.gz](https://github.com/w3c/csswg-drafts/files/3893435/test_animation.html.tar.gz) in Chrome and Firefox and they show different animation behaviors. 
```
    const keyframe1 = [
      {"transform":"translateX( 200px ) rotate( 360deg )"},
      {"transform":"translateX( 100% ) scale( 1 )"},
    ];
    const keyframe2 = [
      {"transform":"translateX( 200px ) rotate( 360deg )"},
      {"transform":"translateX( 100% ) scale( 2 )"},
      {"transform":"none"},
      {"transform":"translateX( 200px ) rotate( 360deg )"},
    ];

    const animation1 = div.animate(keyframe1, {
                              "duration":3000,
                              "easing":"linear",
      });
    const animation2 = div.animate(keyframe2, {
                              "duration":3000,
                              "easing":"linear",
      });

```
The animation2 starts simultaneously as the animation1.  The default composition of two animations, playing at the same time, is the replace operation which means the result of compositing the effect value with the underlying value is simply the effect value.

The duration of the animation is 3 seconds. In the first two seconds, Firefox and Chrome have the same rendered animation. However, in the last second, we can see the square starts rotating in the Chrome but does not rotate in the Firefox. 

### Potential Explaination

We believe the empty keyframe “{}” is taking its underlying value from animation1 first keyframe, but we are not able to find this behavior in the [spec](https://www.w3.org/TR/web-animations-1/#keyframe-effect).  The confusion comes from whether the underlying style should be a neutral keyframe or the initial keyframe of animation1.

It appears that Chrome and Firefox are resolving the empty keyframe based on the initial keyframe of animation1; however, Chrome is resolving to the transform list whereas Firefox is resolving to a matrix representation. and does not perform matrix fallback, thus we see the rotation.  And Firefox does perform the matrix fallback. 




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4543 using your GitHub account

Received on Tuesday, 26 November 2019 18:26:11 UTC