CSS Animation and Shadows

Recently I was working on a menu for the mobile version of a website and the menu had a box-shadow effect. This shadow looked nice, however when the menu was animating in, it would lag and was janky on mobile devices. In doing some research to figure out how to make it less laggy, I came to the conclusion that you really shouldn’t animate box-shadows if you don’t have to. However, it can be done.

Tobias Ahlin has a great article on animating a pseudo-element instead of the box-shadow property, which will limit the amount of repaints and give you smooth performance. Basically by doing this you are targeting opacity, which along with transform, are the only two CSS properties that do not cause a repaint. The pseudo-element is sitting there with the box-shadow, however it’s opacity is at 0 and on the trigger (so let’s say however) the opacity is changed, which animates the box-shadow. Another article by Joshua Bemenderfer also talks about this approach. Doing this adds extra work, but for mobile devices and my menu example from before, it is worth it.

Something else to note, box-shadows can lag devices when scrolling as well. Animating and moving elements with box-shadows should always be developed with performance in mind.