CSS3动画怎么让元素动起来？transition和animation区别详解

CSS3动画的核心在于精准选择transition还是animation：transition适用于简单的状态切换，如按钮悬停变色或菜单展开，但它仅在属性实际变化时被动响应、仅支持两态插值、无法自动触发或循环；而animation依托@keyframes实现多关键帧控制，能轻松完成弹跳、轮播、路径运动等复杂效果，并支持自动播放、无限循环、方向反转、延迟启动及首帧入场动画——当需要真正意义上的“序列化动效”而非“响应式过渡”时，animation是唯一解，二者虽可共存协同（如加载旋转+悬停缩放），但需警惕属性覆盖与浏览器重排陷阱，合理分工才能兼顾表现力与性能。

用 transition 还是 animation，取决于你想要的是“状态切换”还是“帧序列控制”。前者适合按钮悬停变色、菜单展开这类简单响应；后者才能做弹跳、循环轮播、路径运动等复杂效果。

什么时候必须用 animation？

当你需要：多关键帧、自动触发、循环播放、控制播放方向或延迟起始时间时，transition 无能为力。

• transition 只能在两个状态间插值（比如 opacity: 0 → 1），不能定义第 3 帧、第 4 帧
• 没有 @keyframes 就没有 animation，而 transition 完全不依赖它
• animation 可以设 animation-iteration-count: infinite，transition 永远只执行一次（除非反复触发）

transition 的坑：它不主动动，只等你“动手”

transition 不是动画声明，而是“当某个属性变化时，用什么方式过渡”。没变化，它就彻底沉默。

• 写完 transition: all 0.3s 后元素不动？检查是否真有属性被修改（比如 JS 改了 className 或内联 style）
• display: none → block 不会触发 transition —— display 是离散属性，无法插值，改用 opacity + visibility
• 想让元素一进来就动？transition 做不到，得靠 animation 配合 animation-fill-mode: forwards

animation 和 transition 能一起用吗？

能，而且很常见——但要注意叠加逻辑和优先级。

• 两者控制同一属性（如 transform）时，animation 会覆盖 transition 的中间过程，但不会阻止 transition 在动画结束后生效
• 典型场景：一个按钮用 animation 做加载旋转，用户 hover 时再用 transition 缩放。只要 animation 没锁定 transform 的最终值，hover 缩放仍会触发
• 避免冲突：给 animation 的关键帧明确写出所有要动画的属性（比如同时写 transform 和 opacity），否则未声明的属性可能被 transition 拦截并意外插值

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.element {
  animation: slideIn 0.4s ease-out forwards;
  /* 下面这行不会干扰上面的动画，因为动画已结束且保持 final state */
  transition: opacity 0.2s;
}

真正容易被忽略的是：浏览器对 transition 的“变化检测”非常严格——哪怕只是 JS 里读了一次 offsetHeight，都可能强制重排，打断预期的过渡链。而 animation 是独立时序引擎，更可控，也更重。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS3动画怎么让元素动起来？transition和animation区别详解》文章吧，也可关注golang学习网公众号了解相关技术文章。