【发布时间】：2026-01-23 07:00:02
【问题描述】：
当我导航到我的一个子页面时，我试图将 CSS3 动画显示为加载器动画。 我在rotateY 上使用关键帧动画。 问题是在 Firefox 上，当导航到另一个页面时，动画确实可以工作，但它非常生涩和不稳定。
在 Chrome 和 Safari 上，相同的动画效果流畅而完美。
这是一个小提琴： http://jsfiddle.net/p6mgxpbo/
HTML：
<div class="gb-loading">
<div id="animatedElem" class="pin-c">
<div class='pin'></div>
</div>
<div class="pin-mirror"></div>
<div id="gb-lb" class="load-bounce"></div>
</div>
CSS：
.gb-loading {
position: fixed;
left: 0;
right: 0;
top: 50%;
bottom: 0;
width: 70px;
height: 70px;
margin: auto;
z-index: 101;
margin-top: -100px;
}
.pin-c {
width: 70px;
height: 70px;
position: absolute;
top: 0;
left: 0;
z-index: 11;
-webkit-animation: pulsate 1.5s linear infinite;
-moz-animation: pulsate 1.5s linear infinite;
-o-animation: pulsate 1.5s linear infinite;
animation: pulsate 1.5s linear infinite;
}
.pin {
width: 70px;
height: 70px;
background-color: #34baab;
position: absolute;
left: 0;
top: 0;
-webkit-border-radius: 50% 50% 50% 0;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin-mirror {
width: 70px;
height: 70px;
background-color: #003146;
position: absolute;
left: 0;
bottom: -48px;
z-index: -1;
-webkit-border-radius: 50% 0 50% 50%;
border-radius: 50% 0 50% 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin:after {
content: '';
width: 25px;
height: 25px;
margin: 22px 0 0 22px;
background-color: #003146;
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.load-bounce {
width: 25px;
height: 25px;
position: absolute;
left: 65px;
background-color: #003146;
-webkit-transform: translateZ(0.5);
-moz-transform: translateZ(0.5);
transform: translateZ(0.5);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: bounce .5s linear infinite alternate;
-moz-animation: bounce .5s linear infinite alternate;
-o-animation: bounce .5s linear infinite alternate;
animation: bounce .5s linear infinite alternate;
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
@-moz-keyframes pulsate {
0% {
-moz-transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(360deg);
}
}
@keyframes pulsate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(-40px);
}
}
@keyframes bounce {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(-40px);
}
}
@-moz-keyframes bounce {
0% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(-40px);
}
}
只有当它出现在加载其他资源的页面上时才会出现。我正在尝试将此元素用作预加载动画。所以它在页面上，直到页面的其余部分正在加载。我在同一页面上也有谷歌地图。因此，当浏览器正在下载其他资源时，动画会出现抖动。您将看不到小提琴上的混蛋。
需要一些有关如何解决此问题的见解。 提前致谢！！
P.S：我确实在 * 上浏览了很多与此相关的答案，并尝试在 Google 上搜索，但无济于事。
【问题讨论】：
-
你能分享你的代码吗？在没有看到它的情况下调试它几乎是……不可能的？
-
您需要在问题本身中包含代码。否则它可能会被关闭。
-
在这里工作非常顺利。
-
我也是，我在 FF 和 chrome 中尝试过，没有混蛋。
-
@ShubhamSharma：问题是我们无法帮助解决我们看不到的问题。因此，如果您无法在小提琴上重现该行为，那么将很难找到答案。
标签： css firefox css-animations keyframe