1

我有一个动画，直到几周前还在 Google Chrome 中工作。我什么也没做，突然间它停止工作了。我问了几个我认识的人，他们也做网站，没有人能直接回答我为什么动画不起作用。

我在一个网站上有一个落叶动画，当你点击树叶时它会落下。根据浏览器，图像确实“掉落”（如果您将鼠标悬停在开发人员工具中的链接标签上，您可以看到蓝色框掉落），但实际图像保持不动或仅在屏幕上掉落几个像素。我不知道为什么会发生这种情况，这真的很令人困惑。

所以它应该是这样的：用户点击叶子，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 上运行。我也认为它在野生动物园中有效，除了一片叶子正确地落在那里（为什么只有一片没有落下我无法理解，但是是的）。

4

1 回答 1

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;
 }
于 2012-08-25T07:47:43.713 回答