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

我目前正在为加载图标做一些测试，并且我在不同的浏览器上遇到了一些奇怪的不平顺。css动画在不同浏览器上不平滑

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

这是非常奇怪的我，我不知道我怎么可以优化这些动画。希望你能帮助我

来源

2017-02-09 Benmay

我不认为这里有很多奇怪的东西。你所看到的是浏览器渲染事物的自然差异。不要忘记，他们大多数使用自己的，不同的渲染引擎。

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

首先，当您在标准的，但现代标准的低分辨率显示器上移动某些像素时，它看起来很糟糕。简单地说，因为你每半秒钟左右就会移动对象1px。增加到30px，你会注意到它看起来更平滑。您的示例＃1特别支持这一点。由于点是静止的，但不透明度提供了很多关键帧，所以这种动画在所有浏览器中看起来都是最好的。
未卸载到GPU的动画将具有较低的帧率。最重要的是，如果您将动画制作得非常慢并拖出，最终结果会更糟糕。

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

来源

2017-02-09 14:07:47

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

回答

相关问题