学习前提
理解CSS状态选择器、transform和媒体查询。
本课完成后你能做什么
用有限的运动表达交互反馈，并为减少动态偏好提供等价体验。
先理解机制
transition描述属性从旧值变为新值的过程，animation通过关键帧安排变化。悬停抬升适合transition，独立循环装饰可能需要animation。先确认运动帮助用户理解什么；若只是持续吸引注意，通常可以减少或去掉。
优先尝试transform和opacity进行视觉反馈，避免频繁改变影响布局的尺寸和位置；但这不是性能保证，复杂绘制与图层也有成本。不要对所有属性transition:all，否则将来增加宽度或布局规则时可能产生意外动画。
prefers-reduced-motion查询表达用户减少动态的偏好。降低或移除非必要位移，保留边框、文字或颜色反馈，确保用户仍能知道状态改变。不要只是把动画无限加速到几乎闪烁；某些效果应完全关闭。
运动不能承担唯一的信息通道，也不能阻止点击完成。样式过渡与业务异步状态是不同问题：请求完成应由真实结果驱动，不能等动画结束就假定保存成功。
可运行示例
运行方式：将HTML示例保存为独立的.html文件并在浏览器打开；含脚本的示例使用现代浏览器。资源文件与多文件模块另按正文要求准备。
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Honeysuck practice</title></head><body>
<style>
.demo-link{display:inline-block;padding:16px 24px;border:2px solid #176343;border-radius:12px;color:#176343;transition:transform 160ms ease,background-color 160ms ease}
.demo-link:hover,.demo-link:focus-visible{transform:translateY(-3px);background:#e9f3e9}
.demo-link:focus-visible{outline:3px solid #866200;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.demo-link{transition:none}.demo-link:hover,.demo-link:focus-visible{transform:none}}
</style><a class="demo-link" href="#practice">Try the exercise</a><p id="practice">Feedback remains understandable without motion.</p>
</body></html>推演与验证
正常模式下鼠标悬停和键盘聚焦都有反馈。用浏览器渲染工具模拟减少动态，位移消失但背景和轮廓仍变化。反复快速进入离开，确认没有排队堆积。点击始终能跳到练习，不依赖动画完成。
常见错误与边界
不要让重要内容先opacity:0再等待脚本动画才显示，脚本失败会让内容永久不可见。避免给长段文字持续移动的父容器，影响阅读与定位。
动手练习
为保存成功设计一次性状态变化，同时提供完全无动画版本；说明何时由真实请求结果触发。
参考解法与理由
先渲染明确的“已保存”文字，再增加非必要视觉反馈。减少动态时保留同一文字与时间顺序。错误路径必须显示错误，不能沿用成功动画。