Box-Shadow Transition Performance
One trick you can try to improve the performance of a box-shadow transition is moving the box-shadow to a pseudo-element.
Join the DZone community and get the full member experience.
Join For FreeAdding a CSS transition to animate the box-shadow
of an element is a handy trick.
It's a design technique that's often used on hover
to highlight something. If you've used this effect you might have noticed that sometimes the performance can be suboptimal making the animation slow.
One trick you can try to improve the performance is moving the box-shadow to a pseudo-element.
Slower
Direct transition of the box-shadow
property:
.box-shadow {
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease-in-out;
}
.box-shadow:hover {
box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.1);
}
Faster
Pre-render the hover state of the box-shadow
with a pseudo-element and hide it by setting the opacity:0
:
.box-shadow::after {
box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.1);
opacity: 0; /* hide the hover shadow */
transition: opacity 0.3s ease-in-out;
}
Apply the transition with the opacity property:
.box-shadow:hover::after {
opacity: 1; /* show the hover shadow */
}
That's it!
Published at DZone with permission of Brent Graham. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments