A way to smooth out troublesome CSS animations I never knew existed

The CSS rule is:

will-change

It’s in the official W3 documentation, but not mentioned anywhere on W3 Schools.
https://www.w3.org/TR/css-will-change-1/

Apparently this CSS rule has been around since 2015, but I just discovered it today, because as the saying goes, necessity is the mother of i̶n̶v̶e̶n̶t̶i̶o̶n Googling for solutions.

So what did it do? Simply put, I created repeating pulse animation of a button with text in it, and a box-shadow that expanded and faded away in concert with the pulse. The problem was the text in the button was not resizing smoothly. It was a minor aberration and one that most people would never notice, but I saw it, and it was driving me bonkers.

The below animation shows the difference between what happens when the rule is absent from the CSS (top) and present (bottom.) It’s subtle, but if you look carefully, you’ll see the difference. In this case, I added will-change: transform; and as you can see, it fixed the problem.

The documentation suggests not using this rule excessively, as it is supposedly a resource-hog (though that may not be the case anymore with the computers/phones and bandwidth available today. A lot has changed in the last 5 years.

1 Like