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
Yes! Another fun fact for you: the box-shadow property can be animated. Which means you can make moving pixels like this: codepen.io/jschrag/pen/PrYrQE
But if you apply the box-shadow to a pseudo element & animate it, it actually becomes more performant in the browser. Here’s an article about that: alligator.io/css/transition-box-sh...
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.
Yes! Another fun fact for you: the box-shadow property can be animated. Which means you can make moving pixels like this: codepen.io/jschrag/pen/PrYrQE
But if you apply the box-shadow to a pseudo element & animate it, it actually becomes more performant in the browser. Here’s an article about that: alligator.io/css/transition-box-sh...
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. :)
🤣🤣🤣