那些遇到过的问题

当使用具有matrix3d值的初始关键帧时,用于变换的CSS动画无法正常工作

Gib*_*boK 9 html javascript css css3 css-animations

我需要在div上为属性执行动画scaleZ()并translateZ()使用CSS动画.

当transform属性的动画中的初始和最后一个关键帧值具有类似的"格式" 时,以下代码可以正常工作:

  • 0%是 transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
  • 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);

        });
Run Code Online (Sandbox Code Playgroud) 
        @-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);*/
        }
Run Code Online (Sandbox Code Playgroud) 
    <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>
Run Code Online (Sandbox Code Playgroud)

transform对于matrix3D从中返回的关键帧0%写入的相同动画Window.getComputedStyle()不会使动画正常工作:

  • 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);
  • 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);

        });
Run Code Online (Sandbox Code Playgroud) 
 @-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);
        }
Run Code Online (Sandbox Code Playgroud) 
    <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>
Run Code Online (Sandbox Code Playgroud)

由于技术原因,我需要使用0%的关键帧作为transformation从DOM中的计算样式正确返回的值,使用Window.getComputedStyle()或其他函数(如果可用).

我的问题:

  1. 我的代码是第二个例子吗？
  2. 你能建议另一种从DOM获取计算值的方法吗？
  3. 你知道从返回的值相关的任何错误Window.getComputedStyle()吗？
  4. 你知道CSS动画和不同"符号"的任何错误transform吗？

注意:我在最新的Chrome(55.0.2883.87 m)和FireFox(50.1.0)上看到了这个问题.

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

编辑:

我已经创建了一些新的示例(适用于Chrome)以供进一步调查.

基本上两个例子是旋转的

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

使用一种"符号"的变换,按预期工作

期望的效果 https://jsbin.com/bodaxefake/edit?html,output

当值由计算的CSS样式取代并使用matrix3d重新应用于动画时,动画会有轻微的失真.

相反,我希望重现完全相同结果的动画,因为我理解matrix3d Window.getComputedStyle()应该返回相同的值.

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

val*_*als 5

你的问题是第4点.但这不是一个真正的错误,它是一个复杂的算法,试图弄清楚你想做什么.

当你制作动画从旋转(0度)移动到旋转(360度)时,你有没有想过2个矩阵是一样的？如果仅指定了最初的最终状态,则动画将不存在.

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

我设置了一个动画,可以做你想要的.诀窍是让矩阵保持不变,添加一个我们将要改变的初始旋转,然后添加另一个与此相反的旋转以保持原始状态.

由于这个片段有点夸张,我删除了webkit前缀.(另一方面,现在也不是真的需要)

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

});
Run Code Online (Sandbox Code Playgroud) 
@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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

真正的问题是动画的起点和终点没有足够的信息来重建它.变换的矩阵没有您在一系列单独变换中提供的信息

请参阅片段(2D):开始和结束状态相同,动画不是.在3D中,还有更多的可能性

.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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="test" id="one">1</div>
<div class="test" id="two">2</div>
<div class="test" id="three">3</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

551 次

最近记录：

9 年 前
相关归档
jQuery Ajax文件上传 722
为我的网络应用程序制作自定义右键单击上下文菜单 123
PHP简单的foreach循环与HTML 57
具有不同背景大小的多个背景 47
在div滚动上激活另一个div的滚动 19
CSS 1px边框描边围绕边界半径 18
在CSS Grid中为网格间隙设置不同的长度 13
nth-child没有按预期工作 8
CSS3 -moz-mask支持 6
li中的奇怪文字换行 4
难疑归档
如何禁用文本选择突出显示？ 4937
如何在JavaScript中替换所有出现的字符串 4081
检查字典中是否已存在给定键 2683
如何在TextView中水平和垂直居中文本？ 1932
什么是C ??!??!操作员呢？ 1911
JavaScript等效于printf/String.Format 1874
在JavaScript中生成特定范围内的随机整数？ 1836
如何计算C#中某人的年龄？ 1754
你如何合并两个Git存储库？ 1517
什么是首选的Bash shebang？ 1051