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 回答