Google chrome CSS3动画在Google Chrome中不起作用

我有一部动画，几周前还在谷歌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上确实有效。我也认为它适用于safari，除了一片叶子外，其他所有的叶子都正确地落在那里（为什么只有一片叶子没有落下，这是我无法理解的，但是是的）。

这看起来像是一个浏览器错误。检查您的Linux版本是否与（Mac？）版本相同。我发现的一个解决方法是删除第一个关键帧中的

rotateZ（0deg）

（实际上不需要指定）

---

这看起来像是一个浏览器错误。检查您的Linux版本是否与（Mac？）版本相同。我发现的一个解决方法是删除第一个关键帧中的

rotateZ（0deg）

（实际上不需要指定）

---

对我来说很好。加载并单击后，“主页”页及其边界框都会掉落到屏幕外。离开屏幕后，它会重置到原来的位置。（Chrome 21。）我昨天刚刚更新了它，这可能就是为什么你会看到其中一些在工作。我不认为团队工作，但我可能是错误的工作，对我来说很好。加载并单击后，“主页”页及其边界框都会掉落到屏幕外。离开屏幕后，它会重置到原来的位置。（Chrome 21。）我昨天刚刚更新了它，这可能就是为什么你会看到其中一些在工作。我不认为团队是有效的，但我可能是错的，我不知道为什么，但第一个团队只能有一个论点。其他两个可以有两个，但它只在0%部分使用一个参数。很奇怪，但是让他们工作了一些，谢谢。这个问题在Chrome 23中得到了修复（目前作为金丝雀版本提供）。不知道为什么，但是第一个只能有一个参数。其他两个可以有两个，但它只在0%部分使用一个参数。很奇怪，但还是让它们工作了一些，谢谢。这个问题在Chrome 23中已经修复（目前以金丝雀版本提供）。

 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;
 }