CSS shadow animation optimization techniques

Time:2020-3-23

How to animate box shadow with silky smooth performance

This article is not literal translation, because I think this technique is very interesting and useful, so I started a paper.

box-shaodwIn our work and more and more, with the shadow of the animation more or less have a little. Suppose we have a box like this:


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

When hope hover, box shadow frombox-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)carry out the transition tobox-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 time. And because shadow is a performance consuming style, this kind of animation gives people a little stuck.

Here’s a 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, the size is the same as the parent div, and add the required final box shadow state to the 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, in hover, we just need to set the transparency 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 actually just the change of transparency, without continuous redrawing of the shadow, which effectively improves the smoothness of shadow animation and makes it look more silky.

Why transparencyopacityCompare animationbox-shadowWhat’s the better performance of animation? You can see the table here, listing the impact of different attribute transformations on page rearrangement and redrawing:

very few CSS properties

Finally, demo can look at:

Codepen demo — optimize box shadow animation

The existing problems, another solution

In the original, the above scheme is not perfect, because the final effect is the superposition of two shadows, which may be a little darker in the overall feeling.

So we need to fine tune the final state of the shadow, weaken a little effect, try to make the overlay effect of two shadows similar to that of a single shadow.

Of course, we can optimize the above scheme. We will use another one::afterPseudo elements::afterPseudo element is set to initial state and transparency is 1,::beforePseudo element is set to end state and transparency is 0:

In the actual hover, two pseudo elements are displayed and hidden one by one, so that the final effect is only one shadow effect, and there is no shadow superposition, which is consistent with the transition effect of shadow directly

Codepen demo — optimize box shadow animation

summary

The above is the CSS shadow animation optimization techniques introduced by Xiaobian to you, hoping to help you. If you have any questions, please leave a message to me, and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!