CSS属性transition与animation的区别_CSS动效属性对比

CSS中的transition和animation都能实现元素的动效，但它们在使用场景、控制方式和功能复杂度上有明显区别。理解两者的差异有助于更合理地选择动效方案。

1. 动效触发方式不同

transition依赖状态变化来触发动效，比如:hover、:focus或通过JavaScript添加/移除类名。

• 必须有属性值的变化（如从opacity:0到opacity:1）才会生效
• 只能定义起始和结束状态之间的过渡过程
• 无法控制中间过程的关键帧

animation通过预定义的@keyframes规则独立运行，不依赖用户交互也能自动播放。

• 可设置动画循环、延迟、方向等参数
• 支持多个关键帧，能描述复杂的中间状态变化
• 即使没有用户操作，也能按设定自动执行

2. 控制粒度与灵活性对比

transition语法简洁，适合简单交互反馈。

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

立即学习“前端免费学习笔记（深入）”；

例如：按钮悬停变色、菜单滑入等基础效果

• 只能监听已声明属性的值变化
• 每个属性需单独配置持续时间与缓动函数

animation提供更精细的控制能力。

例如：加载旋转图标、弹窗入场动效、路径移动等复杂动画

• 可在@keyframes中定义0%、50%、100%等多个阶段样式
• 支持animation-play-state暂停/恢复动画
• 可设置infinite无限循环或alternate往返播放

3. 性能与适用场景建议

两者都利用浏览器合成层优化性能，但推荐使用原则如下：

• 用transition处理用户交互引发的短时过渡（如展开折叠）
• 优先对transform和opacity做transition，避免触发重排
• 用animation实现无需交互的连续动画或精确时序控制
• 复杂序列动画建议结合JavaScript控制animation-delay或CSS变量

基本上就这些。根据实际需求选择合适的方式，能让页面既流畅又高效。