Discussion on: Blinking dots: a quick intro to CSS animation

[Rob Levin]

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;
  }
}

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-...