gpt4 book ai didi

google-chrome - CSS3 动画在谷歌浏览器中不起作用

转载 作者:行者123 更新时间:2023-11-28 18:38:36 27 4
gpt4 key购买 nike

我有一个动画,直到几周前还在 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。我还认为它在 safari 中有效,除了其中一片叶子正确地落在那里(为什么只有其中一片没有落下超出我的范围但是是的)。

最佳答案

在我看来这像是浏览器错误。检查您的 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;
}

关于google-chrome - CSS3 动画在谷歌浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12119013/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com