悠悠楠杉
网站页面
CSS过渡与动画：Transition与Keyframes的本质区别
11/29
![]()
相比之下，@keyframes 提供了更精细的动画控制能力。通过定义一系列关键帧（如 from、to 或百分比节点），开发者可以精确描述动画在每一阶段的表现。例如，一个旋转并缩放的图标，可以在0%时设置 transform: scale(1) rotate(0deg);，在50%时变为 scale(1.2) rotate(180deg)，最后在100%恢复原状。然后通过 animation 属性将这个关键帧规则应用到元素上，并设置播放次数、方向、延迟等参数。这种方式更适合复杂的、非交互驱动的动画序列，比如加载动画、徽标展示或视差滚动效果。
从技术实现上看，transition 依赖于属性值的变化来触发，而 @keyframes 则是独立运行的时间线驱动动画。这意味着 transition 更贴近用户的操作行为，具有更强的响应性和自然感；而 @keyframes 更像是预设好的“演出脚本”，一旦启动就会按既定节奏执行，不受中间状态影响。此外，@keyframes 支持无限循环、反向播放、暂停等高级功能，而 transition 默认只在状态变化时播放一次，且无法直接控制播放进度。
在性能方面，两者都应优先使用硬件加速的属性，如 transform 和 opacity，以避免频繁重排重绘带来的卡顿。但 transition 因其轻量级特性，在大多数日常交互中表现更为高效。而 @keyframes 虽然功能强大，但如果滥用复杂计算或作用于大量元素，仍可能导致性能瓶颈。
选择使用哪一种，关键在于需求场景。如果你只是想让一个按钮在 hover 时缓慢变色，或者让下拉菜单优雅展开，transition 是更合适的选择——它代码简洁、易于维护，且与 DOM 状态紧密关联。但当你需要制作一段独立运行的动画，比如心跳效果、打字机文字或路径运动，@keyframes 才能提供足够的表达自由度。
值得一提的是，两者并非互斥。在实际项目中，常常会结合使用。例如，用 transition 处理用户交互的即时反馈，同时用 @keyframes 实现背景装饰性动画。合理搭配不仅能丰富视觉层次，还能保持代码逻辑的清晰。
归根结底，transition 是“状态间的桥梁”，强调自然流畅的过渡；而 @keyframes 是“时间轴上的编排”，追求精准可控的动画叙事。理解它们的设计哲学，才能在不同场景下做出更明智的技术决策，让动效真正服务于用户体验，而非沦为炫技的负担。
