DEV Community

Blinking dots: a quick intro to CSS animation

Eka on May 18, 2020

⚠️ Motion Warning: The Glitch page preview contains animated elements. The CSS animation property makes it possible to create simple UI animati...
Read full post
Collapse
 
roblevintennis profile image
Rob Levin • • Edited

Nice post!

So, I did mine quite similar but slightly different using background-color for my use case. But, I think there's a slight tweak for the reduced motion that's worth pointing out:

@keyframes blink {
  50% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .loader,
  .loader::before,
  .loader::after {
    transition-duration: 0.001ms !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

The update: slow is for devices that cannot handle the animation (smashingmagazine.com/2021/10/respe... aka targeting a screen with a low refresh rate.

And the alternative to full removal of the animation is talked about here:

css-tricks.com/revisiting-prefers-...

Collapse
 
sarahcodes_dev profile image
Sarah 🦄 •

Great post, I didn't know about the media query for reduced motion or even to consider this as an accessibility concern, good to know!

Collapse
 
ekafyi profile image
Eka •

Glad it helped! I'd normally just put that media query in the global CSS with the universal selector * and override if needed.