Getting web front-end to combat: CSS shadow animation Optimization Tips

box-shaodw use and more and more in our work, with a little more or less shaded animation. Suppose that we have such a box below:

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

Hover when desired, the cartridge from the shadow box-shadow: 0 2px 4px rgba (0, 0, 0, 0.3) to the transition 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:

div:hover {
    width: 100px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

Because the transition animation is different in two shadow boxes in the state occurs, so the transition animation time, the browser will continue to redraw the shadow box. But because of the shadow belongs to the consumption of performance style, so this movie feels somewhat Caton.

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

The use of pseudo-elements and optimize transparency

The use of pseudo-elements and optimize transparency, we add an element to the above before pseudo-element, the same size as the parent div, and advance to the final element to add shadow box a good state of need, but the transparency of elements is zero.

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, hover, we only need to transparency pseudo-element can be set from 0 to 1.

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

The advantage of this is that the actual carrying out of the shadow of change, the change is only transparency, but no shadows constantly redrawing, effectively improve the fluency shadow animation, it looks to silky.

Why animate opacity to transparency than on box-shadow animation performance is better? Here you can take a look at this table lists the different attributes transform page rearrangement, redraw the impact of:

Problems, another scheme

This plan is in fact above the original text is not perfect, because the net effect is the effect of two superimposed shadows, shadow color may be a little deeper in the overall feeling.

So it is necessary to fine-tune the shadow of what the final state, weakening a little effect, as far as possible synergistic effect with a single shadow two shadows similar effect.

Of course, we can further optimize the above-described embodiment, we then use a pseudo-element :: after, :: after pseudo elements to the original state and transparency 1, :: before pseudo-element is set to the end state and the transparency of 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);
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

The actual hover when the two pseudo-elements are a significant a hidden, so the final result is only a shadow effect, overlay without shadows, consistent with direct effects of changes in the shadow of the transition:

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

div:hover::after {
    opacity: 0;
}