From what I understand, this article is about creating an illusion of transforming box-shadow by changing it's opacity.
The problem with animating box-shadow is that it triggers repaints on every change.
Iām a web developer & data visualizer working at a think tank in D.C. I'm a self-taught dev trying to better my skills. I spend most of my time on the front end of the stack.
Location
Washington, D.C.
Work
Lead Developer at Center for Strategic and International Studies
Good catch! Looks like I wasn't paying close enough attention. That said, if your animation has two states, one way to approach it would be to have two pseudo elements (::before for default state & ::after for 2nd state) with box-shadow applied and alternate the opacity on those.
From what I understand, this article is about creating an illusion of transforming box-shadow by changing it's opacity.
The problem with animating box-shadow is that it triggers repaints on every change.
Good catch! Looks like I wasn't paying close enough attention. That said, if your animation has two states, one way to approach it would be to have two pseudo elements (
::beforefor default state &::afterfor 2nd state) withbox-shadowapplied and alternate the opacity on those.Or just make a gif. :)
š¤£š¤£š¤£