Blog

  • 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.

Tags: css