我有一个动画,直到几周前还在 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 上运行。我也认为它在野生动物园中有效,除了一片叶子正确地落在那里(为什么只有一片没有落下我无法理解,但是是的)。