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) - 加载动画避免无限旋转圈圈，改用骨架屏+渐显，或带方向感的波纹/滑入
不复杂但容易忽略。动得少一点，想得多一点，动画就从“功能点缀”变成“体验锚点”。
