前端 CSS 动画与交互动效

动效可以解释状态变化、建立空间关系并提供操作反馈。它也会增加绘制成本和认知负担。设计动效时应先明确它传达什么，再控制属性、时长和取消方式。

一、用过渡表达状态变化

transition 适合在两个稳定状态之间插值，例如按钮悬停、面板展开和选中状态变化。状态由类名或属性控制，避免依赖脚本不断改写动画参数。

.button {
    transform: translateY(0);
    transition: transform 140ms ease, background-color 140ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

过渡应有明确的开始和结束状态。动态内容被移除或路由切换时，需要保证动画结束后组件能正确清理。

二、优先动画合成友好属性

transform 和 opacity 通常比频繁修改布局属性更容易保持流畅。动画宽高或位置会导致布局计算，复杂页面中成本更高。若必须改变布局，应限制影响范围并通过性能工具观察帧耗时。

不应默认给所有动画元素永久设置 will-change。它会让浏览器提前准备资源，持续占用内存。

三、动画要与交互反馈一致

动画时长应服务于反馈目的。轻微按压反馈可以短促，页面过渡可以稍长；操作结果不能因为动画过慢而让用户误以为没有响应。

重要状态还应有非动画表达，例如文字提示、图标或语义属性。动画不能成为唯一的信息渠道。

四、尊重减少动态效果偏好

部分用户会要求减少运动。可通过媒体查询缩短或移除非必要动画，尤其是大幅位移、视差和持续循环效果。

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
    }
}

实际项目应区分必要状态过渡与装饰动效，避免用一条规则造成重要反馈无法察觉。

五、避免布局抖动

脚本动画若每帧读取布局再写入样式，会造成主线程反复计算。视觉更新应在帧回调中批量执行，动画循环结束后停止请求下一帧。

六、验证性能和可访问性

在低性能设备、页面滚动和多元素同时动画时检查帧率。确保键盘焦点、屏幕阅读器状态和减少动态效果偏好均能正常工作。

动效设计的检查方法

• 为每个动效说明它传达的状态或空间关系。若删去动画后用户仍能理解操作结果，且动效没有带来反馈价值，就可以简化。
• 动画触发应与真实状态一致，不能只靠悬停展示关键操作。触屏、键盘和减少动态效果偏好下都要保留完整反馈。
• 转场过程中快速重复操作时，检查动画能否中断并进入正确终态。反复排队的动画会让界面和用户意图脱节。
• 低端设备上观察主线程、合成层和内存占用。大量元素同时启用滤镜、阴影或模糊时，成本可能高于简单位移。
• 页面卸载、路由切换和组件隐藏后停止动画循环与观察逻辑，避免视觉上看不见但任务仍持续运行。

复核场景

列表项新增时可以轻微淡入，帮助用户理解内容来源；删除时应先明确操作是否可撤销，再选择是否播放退出动画。动画期间若允许再次点击，要保证状态不会重复提交。对减少动态效果的用户保留即时状态变化，并在页面切换时停止未完成动画。

场景取舍补充

动效时间应在真实设备上体验，桌面指针操作的短反馈不一定适合触屏过渡。长时间运动会延迟用户对状态变化的确认，关键按钮应在提交后立即改变状态，再播放辅助性转场。

交互动效还要检查快速连续操作和状态反转，例如打开后立即关闭。动画完成回调不能把已经更新的状态再改回旧值。

动效参数作为设计系统的一部分统一维护，能避免相同操作在不同页面出现过快或过慢的反馈；复杂动画仍应允许局部例外。

七、关键帧和状态驱动动画

transition 适合由状态切换触发的两个端点变化；@keyframes 适合多阶段、循环或独立时间线。动画名称和触发条件应与组件状态关联，结束时应进入明确终态，不依赖动画事件才更新关键业务状态。

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.saving-indicator {
    animation: pulse 1.2s ease-in-out infinite;
}

循环动画应只用于确实需要持续提示的状态，并提供停止时机。若保存已经完成，组件必须移除循环，而不是让视觉继续表示忙碌。

八、交互动效与状态机

动效可以承接加载、提交、成功和失败状态，但不能成为状态唯一载体。请求失败时应显示明确文字和重试操作；按钮点击后立即提供反馈，即使转场还未结束。

快速切换状态时，旧动画可能仍在运行。组件应处理动画中断、反向播放和重复触发，确保视觉状态最终与业务状态一致。复杂时间线可由动画库管理，但要评估包体和生命周期。

九、性能、层叠与合成

对 transform 和 opacity 做小范围动画通常较易交给合成阶段，但滤镜、阴影、裁剪和大面积透明层可能引起额外绘制。will-change 只在明确的短期动画前开启，动画结束后释放。层叠上下文变化还会影响弹层和固定元素。

十、动效规范与可访问性

建立统一的时长、缓动和位移尺度，减少页面之间的不一致。尊重 prefers-reduced-motion，非必要装饰动画可以移除；滚动和焦点不应被持续位移干扰。真实设备上检查低帧率和后台恢复。

实施中的取舍与复核

动效应传达状态变化、空间关系或操作结果。进入页面的装饰动画如果持续占用主线程却不提供信息，可以删除；保存成功、面板展开等反馈则应简短且可预测。交互状态发生变化时，动画应与真实状态保持一致，不能在动画结束前仍允许用户操作旧位置的控件。

优先动画化合成成本较低的属性，但也要测量图层数量和显存。大面积模糊、阴影和滤镜可能造成昂贵绘制，即使使用透明度动画也未必流畅。频繁创建和销毁图层会增加管理开销，will-change 应限于短时且确实有收益的对象，动画完成后恢复普通状态。

动画需要支持减少动态效果偏好，并保证关闭动画后功能仍完整。拖动、滚动和连续输入过程里的动态反馈应保持直接，不要用延迟过长的缓动妨碍操作。页面进入后台、组件卸载或用户快速重复触发时，要取消旧动画并确保最终状态确定，避免多个动画竞争同一属性。

回归时用低端设备、滚动容器、弹窗和高缩放场景检查掉帧、闪烁和焦点移动。截屏对比可发现最终样式差异，却不一定发现动画中途的卡顿；还需录制实际交互并观察每帧主线程工作。动效时长、曲线和距离可以作为设计令牌管理，减少不同模块之间的感知差异。

复核案例与后续维护

动效时序要考虑连续操作。用户再次打开面板时应取消上一轮退出动画并立即转到正确状态，不能等待旧动画结束后再执行新动作。动画结束事件可能因节点移除、浏览器节流或属性变化而不触发，应提供明确的状态完成路径，不把业务提交依赖于视觉动画事件。

复杂页面同时运行的动画数量需要受控。长列表每行都启用进入动画会增加绘制与脚本成本，还可能让用户无法稳定定位内容。可只对用户当前操作的局部提供反馈，并避免滚动时重复启动动画。低端设备上必要时减少模糊、阴影和位移幅度，保持功能反馈优先。

动画设计应说明起止状态、持续时间、打断规则和减少动态效果时的表现。自动化验证最终状态，手工录制中间帧检查闪烁与焦点。版本更新后维护动效令牌和组件示例，避免不同模块自行发明不兼容的缓动曲线。

总结

动效应解释状态、及时回应操作，并控制在浏览器容易处理的属性上。尊重减少动态效果偏好，避免无意义循环与永久图层提示，再通过真实页面性能和可访问性检查验证效果。