当前位置：首页 > 文章列表 > 文章 > 前端 > CSStransitionvsanimation：做动画选哪个？优缺点大对比

CSStransitionvsanimation：做动画选哪个？优缺点大对比

2025-06-06 21:45:58 0浏览收藏

一、transition：适合简单状态过渡

transition 的核心在于“状态之间的平滑切换”。比如一个按钮 hover 时改变颜色或大小，就可以用 transition 实现。

使用场景：

按钮悬停效果
表单元素获得焦点时的变化
简单的展开/收起动画

优点：

写法简单，代码量少
性能较好，浏览器优化充分
不需要 keyframes，逻辑清晰

缺点：

只能在两个状态之间过渡（如 from → to）
动画过程不可控，不能做多阶段动画
触发条件有限（通常是 hover、focus、class 变化）

举个例子：

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

这样就能实现一个颜色渐变的 hover 效果。

二、animation：适合复杂动画控制

animation 需要配合 @keyframes 使用，可以定义多个关键帧，实现更丰富的动画流程。

使用场景：

加载动画（如旋转的 loading 圆圈）
页面进入/离开动效
多阶段动画（比如先放大再缩小）

优点：

控制力强，可以定义多个关键帧
支持循环播放、延迟启动等高级设置
不依赖用户交互也能自动播放

缺点：

语法相对复杂，特别是写 keyframes 时
过度使用可能影响性能（尤其是大量 DOM 元素动画）
调试起来比 transition 困难一些

示例代码：

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

这个例子实现了一个无限旋转的加载图标。

三、如何选择？看你的需求

只需要两个状态之间的平滑变化？
? 用 transition，简洁高效。
需要多个阶段、循环播放、自定义节奏？
? 用 animation，灵活强大。
动画逻辑复杂，甚至涉及 JS 控制？
? 可以考虑结合 JS 或用 JavaScript 动画库（如 GSAP），但优先尝试 CSS 解决。

四、小贴士：注意兼容性和性能

硬件加速：
对 transform 和 opacity 使用动画更容易触发 GPU 加速，性能更好。
避免过度动画：
太多动画会影响用户体验和页面流畅度，尤其是在低端设备上。
浏览器兼容性：
虽然现代浏览器都支持 transition 和 animation，但在旧版浏览器中仍需添加前缀（如 -webkit-）。

基本上就这些。transition 和 animation 各有长处，理解它们的差异，才能写出既好看又高效的动画效果。

到这里，我们也就讲完了《CSStransitionvsanimation：做动画选哪个？优缺点大对比》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于animation,性能优化,CSS动画,Transition,网页开发的知识点！

animation 性能优化 CSS动画 Transition 网页开发