当使用带有matrix3d值的初始关键帧时，CSS的CSS动画无法正常工作 [英] CSS Animation for transform does not work properly when using an initial keyframe with matrix3d value

查看：202
本文介绍了当使用带有matrix3d值的初始关键帧时，CSS的CSS动画无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在属性 scaleZ（）和 translateZ（）的div上执行动画使用CSS动画。



下面的代码在 transform 属性的动画中的初始和最后一个关键帧值处于类似format：




  • 0％是 transform：rotateY（-179deg）scaleZ（2）translateZ ;

  • 100％是 transform：rotateY（179deg）scaleZ（2）translateZ（200px）; 



  console.clear document.addEventListener（'DOMContentLoaded'，（）=> {let content1 = document.querySelector（'＃content1'）; var computedTransform = window.getComputedStyle（content1）.transform; console.log（computedTransform）;}）; / code> 

  @ -webkit-keyframes animation {0％{/ * works * / -webkit-transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; / * issue * / / * transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0,0,0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; * /} 100％{-webkit-transform：rotateY（179deg）scaleZ（2）translateZ（200px）; transform：rotateY（179deg）scaleZ（2）translateZ（200px）; }} @keyframes animation {0％{/ * works * / -webkit-transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; / * issue * / / * transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0,0,0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; * /} 100％{-webkit-transform：rotateY（179deg）scaleZ（2）translateZ（200px）; transform：rotateY（179deg）scaleZ（2）translateZ（200px）; }}＃content1 {-webkit-animation：animation 2s;动画：动画2s; -webkit-animation-fill-mode：forward; animation-fill-mode：forward; / * works * / -webkit-transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; / * issue * / / * transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0,0,0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; * /}  

 < div id =wrapper1style = position：fixed; top：100px; left：300px; perspective：1000px; width：250px; height：250px; border：dotted 1px blue < div id =content1style =width：250px; height：250px; background-color：lightsalmon; opacity：0.2;> < / div> < / div>





与相同的动画变换为关键帧0％写为 matrix3D 从 Window.getComputedStyle（）不会使动画正常工作：




  • 0％是

  • 100％是 transform：rotateY（179deg）scaleZ（2）translateZ（200px）; 



  console.clear document.addEventListener（'DOMContentLoaded'，（）=> {let content1 = document.querySelector（'＃content1'）; var computedTransform = window.getComputedStyle（content1）.transform; console.log（computedTransform）;}）; / code> 

  @ -webkit-keyframes animation {0％{/ * works * / / * transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; * / / * issue * / -webkit-transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0 ，-0.0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0，-0.0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; } 100％{-webkit-transform：rotateY（179deg）scaleZ（2）translateZ（200px）; transform：rotateY（179deg）scaleZ（2）translateZ（200px）; }} @keyframes animation {0％{/ * works * / / * transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; * / / * issue * / -webkit-transform：matrix3d（-0.999848，0 ，0.0174524,0,0,1,0,0，-0.0349048,0，-1.9997,0，-6.98096,0,399.939,1）; transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0，-0.0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; } 100％{-webkit-transform：rotateY（179deg）scaleZ（2）translateZ（200px）; transform：rotateY（179deg）scaleZ（2）translateZ（200px）; }}＃content1 {-webkit-animation：animation 2s;动画：动画2s; -webkit-animation-fill-mode：forward; animation-fill-mode：forward; / * works * / / * transform：rotateY（-179deg）scaleZ（2）translateZ（200px）; * / / * issue * / -webkit-transform：matrix3d（-0.999848,0,0.0174524,0,0,1， 0,0，-0.0349048,0，-1.9997,0，-6.98096,0,399.939,1）; transform：matrix3d（-0.999848,0,0.0174524,0,0,1,0,0，-0.0349048,0，-1.9997,0，-6.98096，0，-399.939,1）; }  

 < div id =wrapper1style = position：fixed; top：100px; left：300px; perspective：1000px; width：250px; height：250px; border：dotted 1px blue> < div id =content1style =width：250px; height：250px; background-color：lightsalmon; opacity：0.2;> < / div> < / div>



由于技术原因， key-frame 0％使用 Window.getComputedStyle（）从DOM中的计算样式正确返回的转换



我的问题：


  1. 是我的代码

  2. 您是否可以建议一种替代方法来从DOM获取计算值？

  3. 您知道任何与错误相关的错误吗？从 c>

  4. 返回
    5. code> transform ？

注意：我在Chrome上看到这个问题（55.0.2883.87 m）和FireFox（50.1.0）。



欢迎任何解决方案或想法。





编辑：



我已创建几个新示例（用于Chrome）进行进一步调查。



基本上旋转



来自rotateY（20deg）
to rotateY（90deg）



使用一种类型的符号转换，可按预期工作



所需效果
https://jsbin.com/bodaxefake/edit?html,output



当值由计算的CSS样式代替，并使用matrix3d重新应用到动画时，动画有轻微的失真。



相反，我希望重现动画的完全相同的结果，因为我的理解，从 Window.getComputedStyle（）的matrix3d应该返回相同的值。 p>

效果不正确
https：/ /jsbin.com/luhikahexi/edit?html,output

解决方案

您的问题是点数4.但是不是真的是一个错误，它是一个复杂的算法试图找出你想要做什么。



当你做一个动画从旋转（0deg）旋转（360deg），你有没有想过，这两个矩阵是相同的？如果只指定了初始的最终状态，动画将不存在。



当你按照你所做的方式设置动画时，算法对于做什么是无知的，所以行为不是你期望的。但我不会说这是一个错误。



我设置了一个动画，做你想要的。诀窍是离开矩阵常数，添加一个初始旋转，这是我们将改变，只是添加另一个旋转与此相反，以保持原始状态。



因为这段代码片段有点多，我删除了webkit前缀。 （另一方面，现在也不需要）



  console.clear ）; document.addEventListener（'DOMContentLoaded'，（）=> {let content1 = document.querySelector（'＃content1'）; var computedTransform = window.getComputedStyle（content1）.transform; console.log（computedTransform）;} ;  

  @keyframes animation {0％{transform：matrix3d -0.999848,0,0.0174524,0,0,1,0,0,0-0349048,0，-1.9997,0，-6.98096,0，-399.939,1）; } 0.1％{transform：rotateY（-179deg）rotationY（179deg）ma​​trix3d（-0.999848,0,0.0174524,0,0,1,0,0,0,0349048,0，-1.9997,0，-6.98096,0， 399.939,1）; } 100％{transform：rotateY（179deg）rotationY（179deg）ma​​trix3d（-0.999848,0,0.0174524,0,0,1,0,0,0,0349048,0，-1.9997,0，-6.98096,0，-399.939 ，1）; }}＃content1 {animation：animation 2s; animation-fill-mode：forward; transform：matrix3d（-0.999848，0，0.0174524，0，0，1，0，0，-0.0349048，0，-1.9997，0，-6.98096，0，-399.939，1）;}  

 < div id =wrapper1style =position：fixed; top：100px; left：300px; perspective：1000px; width：250px; height：250px; border：dotted 1px blue> < div id =content1style =width：250px; height：250px; background-color：lightsalmon; opacity：0.2;> < / div>< / div>



是在动画的开始和结束点没有足够的信息来重建它。变换的矩阵没有您在一系列单独变换中给出的信息



请参阅代码片段（在2D中）：开始和结束状态是同样，动画不是。在3D中，还有更多的可能性。



  .test {width：50px; height：50px; position：absolute; top：400px; left：100px;}＃one {background-color：lightgreen; transform：translateX（200px）;动画：tr1 6s infinite;} @ keyframes tr1 {0％{transform：rotate（0deg）translateX（200px）} 33％，100％{transform：rotate（-90deg）translateX（200px）}}＃two {background-color ： 浅蓝; transform：translate（200px，0px）;动画：tr2 6s infinite;} @ keyframes tr2 {0％，33％{transform：translate（200px，0px）rotate（0deg）} 66％，100％{transform：translate（0px，-200px）rotate（-90deg） }}＃three {background-color：tomato; transform：translate（200px，-200px）rotate（0deg）translateY（200px）;动画：tr3 6s infinite;} @ keyframes tr3 {0％，66％{transform：translate（200px，-200px）rotate（0deg）translateY（200px）rotate（0deg）; } 100％{transform：translate（200px，-200px）rotate（-270deg）translateY（200px）rotate（180deg）; }}  

 < div class =testid = one> 1< / div>< div class =testid =two> 2< / div>< div class =testid =three> 3< / div>


I need to execute an animation on a div for properties scaleZ() and translateZ() using CSS Animations.

The following code works fine when initial and last keyframes values in the animation for transform property are in a similar "format":

  • 0% is transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
  • 100% is transform: rotateY(179deg) scaleZ(2) translateZ(200px);

        console.clear();
        document.addEventListener('DOMContentLoaded', () => {
            let content1 = document.querySelector('#content1');
            var computedTransform = window.getComputedStyle(content1).transform;
            console.log(computedTransform);

        });

        @-webkit-keyframes animation {
            0% {
                /*works*/
                -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                /*issue*/
                /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        @keyframes animation {
            0% {
                /*works*/
                -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                /*issue*/
                /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        #content1 {
            -webkit-animation: animation 2s;
                    animation: animation 2s;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
            /*works*/
            -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                    transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
            /*issue*/
            /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
        }

    <div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
        <div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
        </div>
    </div>

The same animation with transform for key-frame 0% written as matrix3D returned from Window.getComputedStyle() does not make the animation work properly:

  • 0% is transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  • 100% is transform: rotateY(179deg) scaleZ(2) translateZ(200px);

        console.clear();
        document.addEventListener('DOMContentLoaded', () => {
            let content1 = document.querySelector('#content1');
            var computedTransform = window.getComputedStyle(content1).transform;
            console.log(computedTransform);

        });

 @-webkit-keyframes animation {
            0% {
                /*works*/
                /*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
                /*issue*/
                -webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
                        transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        @keyframes animation {
            0% {
                /*works*/
                /*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
                /*issue*/
                -webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
                        transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        #content1 {
            -webkit-animation: animation 2s;
                    animation: animation 2s;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
            /*works*/
            /*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
            /*issue*/
            -webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
                    transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
        }

    <div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
        <div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
        </div>
    </div>

For technical reasons I need to use as key-frame 0% a value for transformation properly returned from a computed style in the DOM, using Window.getComputedStyle() or another function if available.

My questions:

  1. Is my code for the second example buggy?
  2. Could you suggest an alternative way to get the computed value from the DOM?
  3. Do you know of any bugs related to value returned from Window.getComputedStyle()?
  4. Do you know of any bugs with CSS Animations and different "notation" for transform?

Notes: I see this issue on latest Chrome (55.0.2883.87 m) and FireFox (50.1.0).

Any solutions or ideas is welcome.

EDIT:

I have created few new examples (for Chrome) for further investigation.

Basically the two example rotate

from rotateY(20deg) to rotateY(90deg)

Using transform with one type of "notation", works as expected

Desired effect https://jsbin.com/bodaxefake/edit?html,output

When the values are instead taken by a computed CSS style and reapplied to the animation using matrix3d, the animation has a slight distortion.

Instead I would expect to reproduce the animation which exactly the same result, as for my understanding the matrix3d from Window.getComputedStyle() should return the same value.

Incorrect effect https://jsbin.com/luhikahexi/edit?html,output

解决方案

Your problem is point number 4. But it isn't really a bug, it 's a complex algorithm trying to figure out what do you want to do.

When you make an animation move from rotate(0deg) to rotate(360deg), have you ever wondered that the 2 matrices are just the same ? If only the initial an final states are specified, the animation would not exist.

When you set the animation the way you did, the algorithm is clueless about what to do, and so the behaviour is not what you expect. But I wouldn't say this is a bug.

I have set an animation that does what you want. The trick is to leave the matrix constant, add an initial rotation that is what we will change, and just add another rotation opposite to this one to keep the original state.

Since this snippet is a little bit extense, I have removed webkit prefixes. (on the other hand, nor really needed nowadays)

console.clear();
document.addEventListener('DOMContentLoaded', () => {
  let content1 = document.querySelector('#content1');
  var computedTransform = window.getComputedStyle(content1).transform;
  console.log(computedTransform);

});

@keyframes animation {
  0% {
    transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  }
    0.1% {
    transform: rotateY(-179deg) rotateY(179deg) matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  }
  100% {
    transform: rotateY(179deg) rotateY(179deg) matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  }
}
#content1 {
  animation: animation 2s;
  animation-fill-mode: forwards;
  transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}

<div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
  <div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
  </div>
</div>

The real problem is that there is not enough information in the beginning and end point of an animation to reconstruct it. The matrices of the transforms don't have the information that you are giving in a series of individual transforms

See the snippet (in 2D): the begin and end states are the same, the animation isn't. In 3D, there are even more posibilities

.test {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 400px;
  left: 100px;
}
#one {
  background-color: lightgreen;
  transform: translateX(200px);
  animation: tr1 6s infinite;
}
@keyframes tr1 {
  0% {
    transform: rotate(0deg) translateX(200px)
  }
  33%,
  100% {
    transform: rotate(-90deg) translateX(200px)
  }
}
#two {
  background-color: lightblue;
  transform: translate(200px, 0px);
  animation: tr2 6s infinite;
}
@keyframes tr2 {
  0%, 33% {
    transform: translate(200px, 0px) rotate(0deg)
  }
  66%,
  100% {
    transform: translate(0px, -200px) rotate(-90deg)
  }
}
#three {
  background-color: tomato;
  transform: translate(200px, -200px) rotate(0deg) translateY(200px);
  animation: tr3 6s infinite;
}
@keyframes tr3 {
  0%, 66% {
    transform: translate(200px, -200px) rotate(0deg) translateY(200px) rotate(0deg);
  }
  100% {
    transform:  translate(200px, -200px) rotate(-270deg)  translateY(200px) rotate(180deg);
  }
}

<div class="test" id="one">1</div>
<div class="test" id="two">2</div>
<div class="test" id="three">3</div>

这篇关于当使用带有matrix3d值的初始关键帧时，CSS的CSS动画无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆