Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS shadow animation optimization method related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this CSS shadow animation optimization method article will have a harvest, let's take a look at it.

Box-shaodw is used more and more in our work, and there are more or less animations with shadows. Suppose we have a box like this:

Div {

Width: 100px

Height: 100px

Box-shadow: 0 2px 4px rgba (0,0,0,0.3)

}

When you want hover, box shadows 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 constantly redraw the box shadow during the transition animation. And because the shadow is a performance-consuming style, so this kind of animation makes people feel more or less stuttered.

Here is a tip to optimize shadow animation in this case.

Optimize with pseudo elements and transparency

Optimized with pseudo elements and transparency, we add a before pseudo element to the above element, which is the same size 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 this is that the actual shadow change is only a change in transparency, instead of constantly redrawing the shadow, which effectively improves the fluency of the shadow animation and makes it look more silky.

Why is it better to animate transparency opacity than to animate box-shadow? You can take a look at this table and list the effects of different attribute transformations on page rearrangement and redrawing:

The existing problems, another solution.

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

So you need to fine-tune the shadow of the final state, weaken the effect a little bit, and try to make the superposition effect of two shadows similar to that of a single shadow.

Of course, we can further optimize the above scheme, and we use another:: after pseudo element,:: after pseudo element set to the initial state and transparency to 1. The pseudo element is set to the end state and the transparency is set to 0:

Div {

Position: relative

Width: 100px

Height: 100px

}

Div::before {

Box-shadow: 0 5px 15px rgba (0,0,0,0.3)

Opacity: 0

}

Div::after {

Box-shadow: 0 2px 4px rgba (0,0,0,0.3)

}

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

Div:hover::before {

Opacity: 1

}

Div:hover::after {

Opacity: 0

}

This is the end of this article on "the method of optimizing CSS Shadow Animation". Thank you for reading! I believe that everyone has a certain understanding of the "CSS shadow animation optimization method" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.