[英]How to improve the performance of this CSS animation?
我正在使用Chrome和纯pulse
CSS动画
.pulse {
width: 20px;
height: 20px;
vertical-align: middle;
background-color: #53A653;
border-radius: 100%;
-webkit-animation: scaleout 3.0s infinite ease-in-out;
animation: scaleout 3.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0.0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
这是jsfiddle 。
我注意到它很慢。 一旦运行它,Chrome其他窗口的滚动将变得不平滑,即使现在我的输入也有些分块。
CSS动画真的慢吗? 还是我的CSS非常糟糕? 如何提高其性能?
尝试将动画持续时间更改为1s:
.pulse {width: 20px; height: 20px; vertical-align: middle;background-color: #53A653; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out;}
编辑:我忘了读那行说你的滚动如何变得矮胖。 尝试使用Firefox(愚蠢的建议)。 如果没有,则很可能只是您的计算机。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.