CSS动画（animation）和过渡（transition）应分工使用：animation负责复杂、自动播放的多阶段动效，如按钮弹跳入场；transition用于交互触发的属性平滑变化，如hover时背景色渐变。通过@keyframes定义初始动画，transition控制后续交互，结合JavaScript避免属性冲突，实现流畅复合动效。
CSS动画（animation）和CSS过渡（transition）虽然都能实现元素的视觉变化，但它们的设计目的和使用方式不同。将关键帧动画（@keyframes）与 transition 搭配使用，可以在特定场景下实现更自然、更灵活的交互效果。理解两者的协作机制，能帮助你更好地控制页面动效。
何时使用 transition，何时使用 animation
Transition 适合处理属性在两个状态之间的平滑过渡，比如 hover 时改变颜色或位移。它依赖于属性值的变化触发，语法简洁，适合用户交互响应。
Animation 基于 @keyframes 定义复杂的多阶段动画，可控制时间函数、迭代次数、方向等，适用于独立运行、无需依赖状态切换的复杂动效。
两者可以共存：用 transition 控制交互引发的状态过渡，用 animation 实现初始化或循环播放的动画。
立即学习“前端免费学习笔记（深入）”；
关键帧动画与 transition 的实际搭配方式
虽然不能直接把 @keyframes 应用于 transition，但可以通过组合使用实现更丰富的效果：
- 页面加载时用 animation 播放入场动画，之后用户交互通过 transition 实现状态切换
- 元素在 hover 时先结束当前 animation，再通过 transition 平滑进入新样式
- 使用 animation 改变某个属性（如 transform），同时为其他属性（如 opacity）设置 transition，实现多属性不同节奏的动效
避免冲突：重置动画与过渡的时机
当 animation 和 transition 同时作用于同一属性时，可能会出现覆盖或延迟响应的问题。建议：
- 在交互触发前，用 JavaScript 移除或暂停 animation，确保 transition 能正常生效
- 利用 animation-fill-mode: forwards; 保留动画结束后的状态，再让 transition 在此基础上进行变化
- 为不同属性分配不同的控制方式，例如 transform 交给 animation，color 交给 transition
实用示例：按钮的复合动效
设想一个按钮，页面加载时有弹跳动画，hover 时背景色平滑渐变：
button {
/* 入场动画 */
animation: bounce 0.6s ease-out;
/* hover 过渡 */
transition: background-color 0.3s ease;
}
button:hover {
background-color: #005fcc;
}
@keyframes bounce {
0% { transform: scale(0.8); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
这样既保留了吸引注意力的初始动画，又保证了交互反馈的流畅性。
基本上就这些。animation 和 transition 各司其职，合理分工能让界面动效既生动又不干扰操作。关键是明确每个动效的目的：自动播放还是响应交互。搭配得当，体验自然提升。
