Great trick by Brad Frost, in which he combines
prefers-reduced-motion? with the
<picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture>
Yes, that actually works!
💫 When taking
prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables