Motion Reduce Preview
Toggle between full motion and reduced motion to check if your CSS animations respect prefers-reduced-motion.
100% client-side · no upload
Motion mode: Showing animations as normal
Spin animation
Bounce animation
Fade animation
Your CSS snippet with reduced motion support
.animated {
animation: spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
} How to use
- Click Full motion to toggle between normal and reduced motion previews.
- Watch the three animation demos to see how they change under reduced motion.
- Use the CSS snippet to wrap your own animations with the
prefers-reduced-motionmedia query.
Related accessibility tools
- WCAG Contrast Checker — verify color contrast ratios
- Font Size Tester — preview text at different sizes
- Keyboard Nav Tester — audit keyboard accessibility
Preguntas frecuentes
- Is this motion preview tool free?
- Yes, completely free with no signup and no usage limits.
- Does my data leave my device?
- No. All processing runs entirely in your browser. Nothing is sent to any server.
- Does it work on mobile?
- Yes. Works on iPhone Safari and Android Chrome without installing any app.