Question

我有一个动画，直到几周前在谷歌浏览器中工作。我什么都没改变，突然间它停止了工作。我问了一些我认识的人，他们也做了网站，没有人真正能给我一个直截了当的答案，说明为什么动画不会起作用。

我在网站上有一个落叶动画，当你点击其落下的叶子时。图像确实＆＃34;跌倒＆＃34;根据浏览器（如果将鼠标悬停在开发人员工具中的链接标记上，则可以看到蓝色框落下）但实际图像保持放置或仅在屏幕上丢弃几个像素。我不知道为什么会发生这种情况真的令人困惑。

所以它应该如何去做：用户点击叶子，jquery更改类，并触发叶子动画使叶子看起来像它的下降。

@-webkit-keyframes fallingLeaves {
 0% {
     opacity: 1;
     -webkit-transform: translate(0, 10px) rotateZ(0deg);
     -moz-transform: translate(0, 10px) rotateZ(0deg);
     -ms-transform: translate(0, 10px) rotateZ(0deg);
     -o-transform: translate(0, 10px) rotateZ(0deg);
     transform: translate(0, 10px) rotateZ(0deg);
     z-index: 100;
 }
 75% {
      opacity: 1;
      -webkit-transform: translate(100px, 600px) rotateZ(270deg);
      -moz-transform: translate(100px, 600px) rotateZ(270deg);
      -ms-transform: translate(100px, 600px) rotateZ(270deg);
      -o-transform: translate(100px, 600px) rotateZ(270deg);
      transform: translate(100px, 600px) rotateZ(270deg);
      z-index: 100;
 }
 100% {
      opacity: 0;
      -webkit-transform: translate(150px, 800px) rotateZ(360deg);
      -moz-transform: translate(150px, 800px) rotateZ(360deg);
      -ms-transform: translate(150px, 800px) rotateZ(360deg);
      -o-transform: translate(150px, 800px) rotateZ(360deg);
      transform: translate(150px, 800px) rotateZ(360deg);
      z-index: 100;
 }

}

这是其中一片树叶的动画之一（有不同的动画可以使树叶落差）。

如果有人能帮助我，那就太棒了。我已经尝试了很多，并且询问了很多人并且什么都没得到。感谢

此网站所在的网站是www.shearmadnesshoboken.com

我应该注意到动画可以在Linux上的Google Chrome上运行。我也认为它在野生动物园中起作用，但其中一片叶子正确落在那里（为什么只有其中一片不会落在我身上但是是的）。

Answer 1

这看起来像是一个浏览器错误。检查您的Linux版本是否与您的（Mac？）版本相同。我找到的解决方法是删除第一个关键帧中的rotateZ(0deg)（您实际上并不需要指定）。

 0% {
     opacity: 1;
     -webkit-transform: translate(0, 10px);
     -moz-transform: translate(0, 10px);
     -ms-transform: translate(0, 10px);
     -o-transform: translate(0, 10px);
     transform: translate(0, 10px);
     z-index: 100;
 }

CSS3动画无法在Google Chrome中使用

1 个答案: