[英]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.