減少動態效果預覽
預覽套用 prefers-reduced-motion: reduce 後 CSS 動畫的呈現方式。
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
常見問題
- 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.
Last updated: By jarvisbox