CSS3动画怎么让元素动起来_用transition和animation区别【详解】

用 animation 而非 transition，当需多关键帧、自动触发、循环播放、控制方向或延迟时；transition 仅支持两态插值且依赖属性变化，无法实现首帧动画或离散属性过渡。

用 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 是独立时序引擎，更可控，也更重。