CSS shadow animation optimization tips

This technique comes from this article - How to animate box-shadow with silky smooth performance

This article is not a literal translation, but I wrote it because I thought this technique is very interesting and useful.

box-shaodw is used more and more in our work, and the animation of the accompanying shadow is more or less there. Suppose we have the following box:

div {
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

I hope that when hovering, the box shadow will transition from box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) .

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

OK, the easiest way is of course:

div:hover {
    width: 100px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

Because the transition animation occurs in two different box shadow states, the browser will continue to redraw the box shadow during the transition animation. And because shadows are performance-intensive styles, this kind of animation feels somewhat laggy.

Here is a little trick to optimize shadow animation in this case.

Optimize with pseudo-elements and transparency

Using pseudo-elements and transparency for optimization, we add a before pseudo-element to the above element, with the same size as the parent div, and add the required final box shadow state to this element in advance, but the transparency of the element is 0.

div {
    position: relative;
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
 
div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
}

Then, on hover, we just need to set the opacity of the pseudo-element from 0 to 1.

div:hover::before {
    opacity: 1;
}

The advantage of doing this is that the actual shadow change is just a change in transparency, without constantly redrawing the shadow, which effectively improves the smoothness of the shadow animation and makes it look smoother.

Why is animating opacity more performant than animating box-shadow ? You can take a look at this table, which lists the effects of different attribute changes on page reflow and redrawing:

very few CSS properties

Finally, you can take a look at the Demo:

CodePen Demo -- Optimizing box-shadow animations

Existing problems, another solution

The above solution in the original text is actually not perfect, because the final effect is the superposition of two shadows, which may make the overall shadow color a little darker.

Therefore, it is necessary to fine-tune the final shadow, weaken the effect a little, and try to make the superimposed effect of the two shadows close to that of a single shadow.

Of course, we can further optimize the above solution. We use another ::after pseudo-element, set ::after pseudo-element to the initial state with an opacity of 1, and set the ::before pseudo-element to the end state with an opacity of 0:

When hovering, one of the two pseudo-elements is shown and the other is hidden. In this way, the final effect is only one shadow effect, without shadow superposition, which is the same as directly transitioning the shadow:

CodePen Demo -- Optimizing box-shadow animations

Summarize

The above is the CSS shadow animation optimization techniques introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!