Animation causing high CPU
Hi,
I wanted to include some funky looking blobs on the background of a page using blur filter, similar to how a lot of websites are doing it these days. The problem is that after a short while I notice that CPU usage is climbing for some reason.
Here's a pen showing something like what I'm doing at the moment, just a couple of divs with some classes applied to blur it and make it spin: https://codepen.io/D10f/pen/vYbGqbp. I'm using Tailwind for this one, if that makes any difference but I've looked at the output CSS and looks quite straight forward as expected.
I'm really confused as to what's causing this, I suspect the issue may be due to the long animation, or maybe a combination of all opacity and blur, even though I specifically used long animation times to make this spinning effect subtle. Any thoughts? Thanks!
I wanted to include some funky looking blobs on the background of a page using blur filter, similar to how a lot of websites are doing it these days. The problem is that after a short while I notice that CPU usage is climbing for some reason.
Here's a pen showing something like what I'm doing at the moment, just a couple of divs with some classes applied to blur it and make it spin: https://codepen.io/D10f/pen/vYbGqbp. I'm using Tailwind for this one, if that makes any difference but I've looked at the output CSS and looks quite straight forward as expected.
I'm really confused as to what's causing this, I suspect the issue may be due to the long animation, or maybe a combination of all opacity and blur, even though I specifically used long animation times to make this spinning effect subtle. Any thoughts? Thanks!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
