1

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?

Jackson Tale
  • 25,428
  • 34
  • 149
  • 271
  • This animation is as good as it gets, IMO. Are you sure it's this that's causing the issue? – jbutler483 May 05 '15 at 09:56
  • Not sure about the exact problem. Just make sure you have hardware acceleration enabled in your browser: http://stackoverflow.com/questions/26356769/test-if-hardware-acceleration-has-been-enabled-for-a-css-animation – Kalpesh Patel May 05 '15 at 09:57
  • @kalpeshpatel yeah, the hardware acceleration is enabled, according to the post you provided.# – Jackson Tale May 05 '15 at 09:59
  • @jbutler483 Yeah, I am very sure. If I open that jsfiddle in my question, Chrome becomes slow, really noticeable slow. – Jackson Tale May 05 '15 at 10:00
  • it works fine on mine...Stupid suggestion: have you tried to close chrome (also the background running progress) and reopen it again? if it doesn't solve this issue, try to hard remove cache maybe? It's hard cause as i said it works more than fine on mine.. – Nick May 05 '15 at 10:35
  • @Nick Yeah I've tried, didn't help. Is it because my graphic card -`Nvidia Quadro NVS 295` is bad? My CPU is `i7-2600S 2.8GHz` – Jackson Tale May 06 '15 at 10:33
  • @kalpeshpatel how can I force to use GPU lie said here http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css – Jackson Tale May 06 '15 at 10:44
  • @JacksonTale may this help you: https://www.urbaninsight.com/2013/01/04/improving-html5-app-performance-gpu-accelerated-css-transitions and http://davidwalsh.name/translate3d. I haven't tried it though. – Kalpesh Patel May 06 '15 at 14:15
  • @kalpeshpatel yeah tried, not that helpful. a bit flicker still – Jackson Tale May 06 '15 at 14:25

1 Answers1

0

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.

Pizza Day
  • 16
  • 2