Question

我目前正在对加载图标进行一些测试，而且我在不同浏览器的平滑度方面遇到了一些奇怪的差异。

的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中的缩放动画看起来确实很糟糕。然而，对于所有这些，如果你增加动画的大小，它会显得更加平滑。这有几个原因：

首先，当你按照现代标准在标准但有点低分辨率的显示器上移动一些像素时，它看起来很糟糕。仅仅因为你实际上每半秒移动对象1px左右。将其增加到30px，您会发现它看起来更平滑。您的示例＃1特别支持这一点。由于点是静止的，但不透明度提供了许多关键帧，因此这个动画在所有浏览器中看起来都是最好的。
未卸载到gpu的动画将完全降低帧速率。最重要的是，如果你使动画非常缓慢并被拖出，最终结果将会更糟。

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

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

1 个答案: