CSS动画和过渡有什么区别_animation与transition对比

transition需状态变化触发，如hover，适用于简单属性渐变；2. animation通过@keyframes定义关键帧，可自动播放，支持复杂动画序列；3. animation提供更精细的播放控制，如延迟、循环、方向等；4. 两者兼容性良好，但建议优先使用transform和opacity以提升性能。

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%），精确控制每一时刻的样式，实现复杂动画序列。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

12

查看详情

举例来说：

• 让一个盒子左右晃动一次：用 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动画和过渡有什么区别_animation与transition对比的详细内容，更多请关注php中文网其它相关文章！