How to animate box-shadows with transforms and opacity

twitter logo github logo ・1 min read

It's long been recommended that we stick to transforms and opacity when it comes to animating elements with CSS. In this screencast I demonstrate how you can animate a box-shadow hover similar to what you see used in Material Design, with transforms and opacity.

View the source files here.

twitter logo DISCUSS
Classic DEV Post from Jul 5

What's one thing you wish you knew before you started programming?

Alex Carpenter profile image
I’m a front-end developer who is passionate about building inclusive web experiences.

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️