A small reduced-motion check before shipping a landing page

A landing page can look fine on a phone and still miss someone’s motion preference. Check both versions of the same page, not only a screenshot. For decorative animation, a scoped CSS rule is a starting point: @media (prefers-reduced-motion: reduce) { .hero-decoration { animation: none; transition: none; } }

着陆页在手机上看起来可能没问题，但仍可能忽略了某些用户的动态偏好。请检查同一页面的两个版本，而不仅仅是查看截图。对于装饰性动画，一个作用域 CSS 规则是一个起点：@media (prefers-reduced-motion: reduce) { .hero-decoration { animation: none; transition: none; } }

Replace .hero-decoration with the element that owns the motion. This is an example, not a fix for every animation on a site. Don’t hide useful information when removing the effect. Test with Reduce Motion off, then on in your device’s accessibility settings. Does the content remain visible? Can you still follow the page and use its controls?

将 .hero-decoration 替换为包含动画的元素。这只是一个示例，并非网站上所有动画的通用修复方案。在移除效果时，不要隐藏有用的信息。请在设备辅助功能设置中先关闭“减少动态效果”，然后再开启进行测试。内容是否仍然可见？你是否仍能浏览页面并使用其控件？

Check animations triggered by interaction as well as ones that start on load. If you’re showing the result in a demo, label a short side-by-side clip: normal motion on one side, reduced motion on the other. Keep the content and viewport the same so the difference is easy to see. The CSS preference value is reduce, not none.

检查由交互触发的动画以及加载时启动的动画。如果你要在演示中展示结果，请标注一段简短的并排剪辑：一侧为正常动态，另一侧为减少动态。保持内容和视口一致，以便于观察差异。CSS 偏好值是 reduce，而不是 none。

Reduced motion doesn’t mean every animation must disappear; essential functionality and information still need to work. Create template Templates let you quickly answer FAQs or store snippets for re-use. Submit Preview Dismiss Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment’s permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse

减少动态并不意味着所有动画都必须消失；基本的功能和信息仍需正常运作。创建模板，模板让你能够快速回答常见问题或存储可重复使用的代码片段。提交 预览 取消 你确定要隐藏此评论吗？它将在你的帖子中被隐藏，但仍可通过评论的永久链接查看。同时隐藏子评论 确认 如需进一步操作，你可以考虑屏蔽此人或举报滥用行为。