Animating box shadow in CSS when performance matters

Animating box-shadow property in CSS is costly in terms of performance, the box-shadow animation causes re-paints on every frame which impacts the performance of page very much. So, how do we animate it keeping the performance as a high priority in mind? And the best answer is we don't.

There is an easy way of mimicking the same effect with minimal re-paints and giving us 60fps animation, and how do we do that? by animating the opacity of the pseudo element.

Let's take an example and see how it works:
 

Create a simple white box, and add the initial shadow

/* For HTML all we need is <div class="box"></div> */

.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
  transition: all 0.3s ease-in-out;
}

Create a hidden pseudo-element also include the shadow for the end state

.box::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
  transition: opacity 0.3s ease-in-out;
}

We have added transition property to both ".box" and ".box::after" and that is because we are going to animate both elements: transform for ".box" and opacity for ".box::after".

This will give us a white box with a subtle shadow.  At this point the shadow from ".box::after" is completely hidden.

Now, all we need to do is to scale up the ".box" on hover and fade in the pseudo-element as well as its shadow:

/* Scale up the ".box" */
.box:hover {
  transform: scale(1.2, 1.2);
}

/* Fade in the ::after pseudo element with bigger shadow */
.box:hover::after {
  opacity: 1;
}

That’s it! Hover the box to see the effect

Even if desktop handles animating box-shadow without any issues, a phone may not.

Keeping transitions and animations to only transform and opacity will help achieve the best possible performance and the best possible user experience.