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