CSS动画与过渡区别详解

CSS中的transition和animation虽都能实现视觉动效，但本质迥异：transition依赖hover等状态变化触发，仅支持起止状态间的平滑渐变，适合按钮变色、淡入淡出等轻量交互；而animation通过@keyframes定义多关键帧，可自动播放、精准控制延迟、循环、方向与暂停，胜任心跳、加载动画、路径运动等复杂序列。二者兼容性良好，但为保障性能，均应优先使用transform和opacity等GPU加速属性——选对工具，才能让动画既流畅又高效。

CSS 动画（animation）和过渡（transition）都能实现元素的视觉变化效果，但它们在使用方式、控制能力和适用场景上有明显区别。理解两者的差异有助于更合理地选择实现方式。

1. 触发方式不同

transition 需要状态改变才能触发，比如鼠标悬停（:hover）、焦点（:focus）或类名变化（JavaScript 添加/移除 class）。它描述的是从一个状态到另一个状态之间的中间过程。

animation 则不需要用户交互也能自动播放，通过 @keyframes 定义关键帧，元素加载后即可运行，也可以通过 class 控制播放状态。

例如：

• 用 transition 实现按钮 hover 变色：只有鼠标移上去才会开始过渡。
• 用 animation 实现心跳动画：页面一加载就开始跳动，无需任何操作。

2. 控制精细度不同

transition 只能定义起始和结束两个状态之间的变化过程，不能控制中间步骤。它适用于简单的属性渐变，如 opacity、transform、color 等。

animation 借助 @keyframes 可以设置多个关键帧（0%、50%、100%），精确控制每一时刻的样式，实现复杂动画序列。

举例来说：

• 让一个盒子左右晃动一次：用 transition 很难实现完整周期，而 animation 可以在 keyframes 中清晰定义路径。
• 实现 loading 旋转+缩放组合动画：必须使用 animation 才能同时操控多个属性在不同时间点的变化。

3. 播放控制能力不同

transition 的播放是被动的，依赖于属性值的变化。一旦触发条件消失（如移出鼠标），动画可能反向执行或中断。

animation 提供更多控制选项，如：

• animation-delay：延迟播放
• animation-iteration-count：重复次数（可设 infinite）
• animation-direction：播放方向（正向、反向、交替）
• animation-play-state：暂停/继续动画

这些让 animation 更适合制作定时、循环或交互式动画。

4. 兼容性与性能考量

两者现代浏览器支持都很好，但在性能方面建议：

• 优先使用 transform 和 opacity 配合 transition，因为这些属性由 GPU 加速，性能更优。
• 避免对 width、height、margin 等触发重排的属性做 transition 或 animation，容易造成卡顿。
• 复杂动画推荐用 animation + transform 组合，既灵活又高效。

基本上就这些。transition 适合简单、交互驱动的状态过渡；animation 更强大，适合复杂、自控节奏的动画效果。根据实际需求选择，才能写出简洁高效的 CSS 动画代码。

终于介绍完啦！小伙伴们，这篇关于《CSS动画与过渡区别详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！