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
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
Create a simple white box, and add the initial shadow
/* For HTML all we need is <div class="box"></div> */
Create a hidden pseudo-element also include the shadow
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:
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" */
/* Fade in the ::after pseudo element with bigger shadow */
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.