CSS 动画

transition 与 animation 的区别

transition 用于两态之间的平滑过渡，必须由状态变化触发（如 hover、class 切换），定义简单：transition: all 0.3s ease。animation 通过 @keyframes 定义完整的动画序列，可以循环、暂停、反向播放，不依赖外部触发。

两者都支持 GPU 加速的属性：transform 和 opacity。改变 width、height、top、left 会触发重排（reflow），性能差；改变 transform: translateX() 只触发合成（compositing），流畅得多。这也是为什么动画应该尽量用 transform 而非改变位置属性。[1]

缓动函数与现代特性

animation-timing-function 控制动画节奏：ease（默认，慢快慢）、linear、ease-in、ease-out，或自定义 cubic-bezier()。CSS 2023 新增的 linear() 函数可以用多点插值描述弹簧效果等复杂曲线，不再需要 JS 库。

• @keyframes：from/to 或 0%/50%/100% 百分比描述动画帧
• animation-fill-mode: forwards：动画结束后保持最终状态，避免元素「弹回」
• prefers-reduced-motion：媒体查询，检测用户是否在系统设置里开启了减少动效，无障碍设计的重要考量
• View Transitions API（Chrome 111+）：页面路由切换时的原生过渡动画，无需 JS 控制