CSS动画廉价感源于节奏与质感缺失，需用自然缓动（如cubic-bezier(0.25,0.46,0.45,0.94)）、控制变化幅度、避免过度装饰，并限制同时触发数量、提升物理真实感。

CSS动画显得廉价，往往不是因为技术不行，而是节奏和质感没把握好。减少触发频率只是表象，核心在于用对缓动（easing）+ 控制变化幅度 + 避免过度装饰。

用自然缓动代替线性或简单ease

默认的 ease 或 linear 容易让动画“机械感”过重。人眼习惯的是有加速度和惯性的运动——比如物体下落先快后慢、按钮按压有弹性反馈。

• 优先尝试 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material Design 的标准缓动）
• 悬停类微动效可用 ease-out 或带轻微回弹的 cubic-bezier(0.34, 1.56, 0.64, 1)
• 避免全站统一用 ease-in-out——它在中段速度最快，反而容易显得“飘”

限制同时触发的动画数量

不是每个交互都要配动画。多个元素一起闪、缩、移，会分散注意力，也加重渲染负担，视觉上就“闹腾”。

• 一次交互只动1–2个关键属性：比如按钮点击，只缩放+变色，不加旋转+位移+阴影扩散
• 列表项进入时，用 stagger（错时）而非齐刷刷入场；延迟差控制在 50–120ms 内更协调
• 滚动视差、背景浮动等装饰性动画建议关闭或降级为 prefers-reduced-motion: reduce 下静音

提升细节质感：从“动起来”到“像真的在动”

廉价感常来自物理逻辑缺失。加一点真实世界的暗示，成本低但效果明显。

• 悬停放大时，配合轻微的 transform: scale(1.02) translateY(-1px)，模拟轻按凹陷感
• 卡片浮起用 box-shadow 动态加深+模糊扩大，别只改 transform: translateY(-4px)
• 加载动画避免无限旋转圈圈，改用骨架屏+渐显，或带方向感的波纹/滑入

不复杂但容易忽略。动得少一点，想得多一点，动画就从“功能点缀”变成“体验锚点”。