Animating box shadow in CSS when performance matters

Posted By : Sushmit Gaur | 02-Sep-2018

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.

Request for Proposal

Recaptcha is required.

Sending message..