CSS 动效需求先写帧预算和降级条件
“做得灵一点”听着有画面，落到开发任务里却没有尺度。动效要上线，设计、产品和开发得先说清设备范围、滚动时是否暂停、低性能设备怎么降级。把边界写进验收项，比上线后围着“丝不丝滑”争半天有效。
先写帧预算，再写特效
60Hz 屏幕每帧约 16.7ms，但这不是动画可以独占的时间。脚本、样式计算、绘制和输入响应都要分走预算。性能目标应来自真实设备的测量，而不是统一写成一个漂亮数字。
OffscreenCanvas 不是默认答案
画布计算较重、又不依赖 DOM 的场景，可以考虑把支持的工作放进 Worker。先检查浏览器兼容性和传输成本；小动画为了“多线程”拆得太碎，反而更难排查。主线程仍负责输入、可访问性和降级开关。
// 仅示意：实际应先做能力检测与错误处理 if ('OffscreenCanvas' in window) { worker.postMessage({ type: 'resize', width, height }); }降级要可预测
页面隐藏时停止动画循环；用户开启减少动态效果时尊重该偏好；设备压力高时减少粒子数或改成静态纹理。不要在运行中偷偷堆will-change，它可能换来更多图层和显存压力。
动效的完成标准不是开发机上好看，而是在约定设备和交互路径里不妨碍内容与操作。这个边界确定后，视觉表达反而更容易做得干净。
