I am using Chrome and a pure pulse
CSS animation
.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;
}
}
Here is the jsfiddle .
I noticed that it is quite slow. Once I run it, the scrolling of the other windows of Chrome becomes not smooth and even now my typing is a little bit chunking.
Is CSS animation really this slow? or my CSS is just very bad? How to improve its performance?
Try changing your animation duration to 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;}
EDIT: I forgot to read the line says how your scrolling became chunky. Try using Firefox (stupid suggestion). If not, it's most likely just your computer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.