#SIMPLE BACKGROUND ANIMATION CSS HOW TO#

The SolutionĪs I briefly mentioned before, when it comes to animating cheaply in modern browsers today, we really only have four options. All of our tests will be run at 6x slower, even our final performant code, to compare evenly. This is pretty unacceptable, even with the GPU performing at six times slower. When our tree first loads with the “bad” animation, we are getting a horrifying 10 FPS:Īt some points though, like in our bottlenecks above, we are getting 0 - 1 FPS. In terms of frames per second, users like to have at least 60 FPS. Yes, that is just milliseconds, however, if we take longer than 16 ms to render a frame, the people will notice. This particular bottleneck is taking 94.85 ms. I slowed the CPU down six-fold to attempt to simulate a chugging MacBook (I would have put it lower if I could have). As the great Lewis and Irish say in their article, “High performance animations”: Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. With CSS in modern browsers, you really only have four options when it comes to animating with no problems. If we check out the performance panel in our devtools for Chrome, we see bottlenecks in our load time! You're probably asking (in your best enraged angry developer voice), “What could cause this?!” Well, turns out our animations are no bueno. It simply takes some awareness rather than a haphazard slapping around of animations. Do we even have other options? Can we even animate without crashing browsers in this world of 2018? I wanted to go over the different options we have.

The animation, a Christmas tree and snow drawing, are obviously not performant-so much so that we can’t even use them. Not that my newest MacBook fared much better, the fans sounded like we were prepping to go into outer space when the animation ran for more than a few minutes. However, we had to comment out the animation and Christmas tree because it was causing our older MacBook laptop to crash. I found this lovely animation online and cleaned it up a bit for a Secret Santa app me and my husband worked on for the holidays.

#SIMPLE BACKGROUND ANIMATION CSS HOW TO#

Learn how to improve animation performance in CSS with a holiday-themed example from Alyssa.

Simple background animation css