css动画在不同浏览器上不流畅

Question

我目前正在对加载图标进行一些测试，我#m 在不同浏览器上的流畅度上遇到了一些奇怪的差异。

看看:https://jsfiddle.net/42xbt4bz/6/

CSS:

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

这对我来说很奇怪，我不知道如何优化这些动画。 希望你能帮助我

Answer 1

我不认为这里有很多奇怪的地方。您所看到的是浏览器呈现事物的自然差异。别忘了，它们中的大多数都使用自己的、不同的渲染引擎。

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

1. 首先也是最重要的一点是，当您在标准但按现代标准来看分辨率有点低的显示器上仅将某物移动几个像素时，它看起来会很糟糕。仅仅是因为您实际上是每半秒左右将对象移动 1px。将其增加到 30px，您会发现它看起来更平滑了。您的示例 #1 特别支持这一点。由于点是静止的，但不透明度提供了很多关键帧，因此该动画在所有浏览器中看起来都是最佳的。
2. 未卸载到 GPU 的动画将具有较低的帧速率。最重要的是，如果您将动画制作得非常慢并且被拖出，最终结果看起来会更糟。

但最重要的是，这些是加载动画。希望用户永远不必查看它们足够长的时间来注意到不一致。