.tip

A card that slides in on scroll is a nice touch until it makes someone motion sensitive queasy. They answered that already in their system settings, Reduce Motion on macOS, and it reaches CSS as one media query.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

Near zero rather than none keeps animationend firing, so code waiting on that event still runs. Reduce means less motion, not none: swap a slide for a fade, keep the hover colour change.