CSS Animation for transform does not work properly when using an initial keyframe with matrix3d valu
Reported by
gibbok.c...@gmail.com,
Jan 11 2017
|
||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 Steps to reproduce the problem: 1. Create a CSS Animation with: key-frame 0% to transform: rotateY(20deg) rotateZ(0deg) scaleZ(2) translateZ(200px); and key-frame 100% to transform: rotateY(90deg) rotateZ(0deg) scaleZ(2) translateZ(200px); 2. Apply an animation adding a class `.animate` to the DOM when pressing button "Animate". Result: Animation works as expected https://jsbin.com/bodaxefake/edit?html,output 3. Create a new file with a new CSS Animation and use `window.getComputedStyle()` function to convert key-frame for previously example to `matrix3d` and applies them to new animation. key-frame 0% to transform: matrix3d(0.939693, 0, -0.34202, 0, 0, 1, 0, 0, 0.68404, 0, 1.87939, 0, 136.808, 0, 375.877, 1); and key-frame 100% to transform: matrix3d(6.12323e-17, 0, -1, 0, 0, 1, 0, 0, 2, 0, 1.22465e-16, 0, 400, 0, 2.44929e-14, 1); 4. Apply an animation adding a class `.animate` to the DOM when pressing button "Animate". Result: Animation is not correct and a slight ditorsion appears https://jsbin.com/luhikahexi/edit?html,output What is the expected behavior? Both animations should be exactly the same https://jsbin.com/bodaxefake/edit?html,output https://jsbin.com/luhikahexi/edit?html,output What went wrong? A slight distortion appears https://jsbin.com/luhikahexi/edit?html,output Did this work before? N/A Does this work in other browsers? N/A Chrome version: 55.0.2883.87 Channel: stable OS Version: 6.3 Flash Version: Shockwave Flash 24.0 r0
,
Jan 11 2017
This could be an argument in favour of getComputedStyle(element).transform returning the actual transform functions instead of serialising as a matrix (https://drafts.csswg.org/css-transforms/#serialization-of-the-computed-value). #0: Feel free to raise a Github issue on the spec if such behaviour interests you.
,
Jan 12 2017
I confirm that I see the same behavior on FF. I have created a Github issue regarding such behavior. https://github.com/w3c/csswg-drafts/issues/891 Thanks for your support.
,
Jan 13 2017
Currently I am trying to "simulate" additive animations using Web Animations API. I found a problematic case when using `getComputedStyle(element).transform` to create start key-frame for an animation with `transform` with`perspective` is applied. More information here: https://github.com/web-animations/web-animations-js/issues/101 I would like to know if you know a solution to this problem. Thanks for your time on this issue.
,
Jan 13 2017
I think the problem there is the same as the one you initially raised. If you remove perspective from the containing wrapper the same difference as with perspective. The perspective in the example is unrelated, the issue is that the animation is different when getComputedStyle() matrices are mixed with transform lists.
,
Jan 13 2017
I can confirm your statement regarding perspective. Thank you for sharing your time and expertise on this issue.
,
Jan 13 2017
No problem, thank you for providing feedback. |
||
►
Sign in to add a comment |
||
Comment 1 by dstockwell@google.com
, Jan 11 2017