css动画在不同浏览器上不平滑

我目前正在做一些加载图标的测试，我在不同的浏览器上体验到了一些奇怪的平滑度差异

看看：

Css:

这对我来说很奇怪，我不知道如何优化这些动画。

---

希望你能帮我

我觉得这里没有太多奇怪的东西。你所看到的是浏览器呈现事物方式的自然差异。别忘了，它们中的大多数都使用自己的、不同的渲染引擎

现在，FF中的缩放动画看起来确实很糟糕。然而，对于所有这些，如果增加动画的大小，它看起来会更平滑。这有几个原因：

首先也是最重要的一点是，当你在一个标准上只移动几个像素，但按照现代标准显示的分辨率有点低时，它看起来会很糟糕。仅仅是因为你每半秒左右移动一次物体。将它增加到30px，你会发现它看起来平滑多了。你的例子#1特别支持这一点。由于点是固定的，但不透明度提供了许多关键帧，因此此动画在所有浏览器中都是最佳的

未卸载到gpu的动画将具有更低的帧速率。最重要的是，如果将动画制作得非常慢并拖出，最终结果会更糟

但最重要的是，这些都是加载动画。希望用户永远不必长时间地查看它们以发现不一致

.loader-icon[class*='bullets'] {
width: 6px;
height: 6px;
display: block;
position: relative;
margin-left: 20px;
margin-top: 50px;
margin-bottom: 10px;
}

.loader-icon[class*='bullets'] span {
content: "";
background: #000000;
width: 6px;
height: 6px;
position:  absolute;
top: 0;
left: 0;
border-radius: 10px;
}
.loader-icon[class*='bullets'] span:nth-of-type(1) { left: 12px; }
.loader-icon[class*='bullets'] span:nth-of-type(3) { left: -12px; }

/* bullets fade */
.loader-icon.bullets-fade span {
-webkit-animation: loader-bullets-fade 1.6s infinite ease;
-moz-animation: loader-bullets-fade 1.6s infinite ease;
animation: loader-bullets-fade 1.6s infinite ease;
animation-delay: 0.4s;
}
.loader-icon.bullets-fade span:nth-of-type(1) { animation-delay: 0.8s; }
.loader-icon.bullets-fade span:nth-of-type(3) { animation-delay: 0s; }
@-webkit-keyframes loader-bullets-fade {
  0% { opacity: 1; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}
@-moz-keyframes loader-bullets-fade {
  0% { opacity: 1; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}
@keyframes loader-bullets-fade {
  0% { opacity: 1; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}

/* bullets jump */
.loader-icon.bullets-jump span {
-webkit-animation: loader-bullets-jump 1.2s infinite ease;
-moz-animation: loader-bullets-jump 1.2s infinite ease;
animation: loader-bullets-jump 1.2s infinite ease;
animation-delay: 0.2s;
}
.loader-icon.bullets-jump span:nth-of-type(1) { animation-delay: 0.4s; }
.loader-icon.bullets-jump span:nth-of-type(3) { animation-delay: 0s; }
@-webkit-keyframes loader-bullets-jump {
  0% { top: 0; }
  40% { top: -4px; }
  80% { top: 0; }
}
@-moz-keyframes loader-bullets-jump {
  0% { top: 0; }
  40% { top: -4px; }
  80% { top: 0; }
}
@keyframes loader-bullets-jump {
  0% { top: 0; }
  40% { top: -4px; }
  80% { top: 0; }
}

/* bullets pulse */
.loader-icon.bullets-pulse span {
-webkit-animation: loader-bullets-pulse 1.2s infinite ease;
-moz-animation: loader-bullets-pulse 1.2s infinite ease;
animation: loader-bullets-pulse 1.2s infinite ease;
animation-delay: 0.2s;
}
.loader-icon.bullets-pulse span:nth-of-type(1) { animation-delay: 0.4s; }
.loader-icon.bullets-pulse span:nth-of-type(3) { animation-delay: 0s; }

@-webkit-keyframes loader-bullets-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes loader-bullets-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes loader-bullets-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}