Animation 适合复杂预定义动画，Transition 用于交互状态平滑过渡；通过 JavaScript 监听 animationend 事件移除 Animation 并启用 Transition，实现无缝衔接与自然交互体验。
在网页动画中，CSS Animation 和 Transition 各有优势。Animation 适合复杂的、预定义的动画序列，而 Transition 更适合响应用户交互时的平滑状态变化。将两者结合使用，可以在保证动画丰富性的同时实现自然流畅的过渡效果。
理解 Animation 与 Transition 的区别
Animation 是通过关键帧（@keyframes）定义一系列中间状态，控制元素在整个动画周期中的表现。它适合做循环播放、复杂路径或定时精确的动画。
Transition 则是监听属性变化，在两个状态之间自动补间，比如从 opacity: 0 到 opacity: 1，浏览器会自动计算中间过程。它更轻量，适用于 hover、focus 等交互场景。
当 Animation 结束后，若想让元素在后续交互中仍保持平滑过渡，就需要合理衔接 Transition。
立即学习“前端免费学习笔记（深入）”；
避免 Animation 与 Transition 冲突
如果一个元素同时设置了 Animation 和对相同属性的 Transition，可能会出现意料之外的行为。例如：
div {animation: slideIn 0.5s forwards;
transition: transform 0.3s ease;
}
此时，动画结束后，transform 被 Animation 占用并固化在最终状态。如果之后再触发 transform 变化，Transition 可能无法生效，因为 Animation 的优先级更高，且未释放控制权。
解决方法是：在 Animation 完成后，将其移除或确保不干扰后续 Transition。
推荐做法：Animation 做入场，Transition 做交互
典型应用场景是元素首次出现用 Animation 淡入或滑入，之后用户操作（如悬停）则由 Transition 处理。
示例代码：
.box {opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.box.animate-in {
animation: fadeInUp 0.6s forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 用户交互时使用 Transition */
.box:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
注意：Animation 设置了 forwards，使最终状态保留。但一旦动画结束，我们可以通过 JavaScript 移除 animate-in 类，改用普通状态 + Transition 来接管后续交互。
用 JavaScript 控制衔接时机
为了确保 Animation 完成后再启用 Transition，可以监听 animationend 事件：
const box = document.querySelector('.box');box.classList.add('animate-in');
box.addEventListener('animationend', function() {
box.classList.remove('animate-in'); // 释放 Animation 控制
box.style.opacity = '1'; // 固定最终状态
box.style.transform = 'translateY(0)'; // 避免被重置
});
这样，Animation 负责初始展示，完成后元素进入“可交互”状态，所有 hover、tap 效果都由 Transition 平滑处理，不会产生跳变。
基本上就这些。关键是分清职责：Animation 做一次性动画，Transition 做持续交互反馈。合理分离，才能实现真正自然的视觉体验。
