transition需属性值变化且可过渡，须写在初始状态；animation需@keyframes定义关键帧。交互简单选transition，多阶段或自主运行选animation；优先用transform/opacity提升性能。
transition 触发条件和常见失效原因
transition 不是自动播放的动画，它只在元素的 CSS 属性值发生「变化」时才起效，且这个变化必须是可过渡的（如 opacity、transform、background-color），不能是 display 或 height: auto 这类不可计算的值。
容易踩坑的地方：
-
transition必须写在「初始状态」上，不是 hover 或 active 状态里；否则第一次变化没过渡效果 - 从无到有添加 class 触发动画时，得用
setTimeout(() => el.classList.add('active'), 0)或el.offsetHeight强制触发重排，否则浏览器可能合并样式计算，跳过过渡 -
transition: all 0.3s看似方便，但会过渡所有可变属性（包括意外改变的box-shadow、z-index），建议明确写出需要过渡的属性，比如transition: transform 0.2s, opacity 0.2s
animation 需要 @keyframes 配合才能生效
animation 是独立于状态变化的主动播放机制，但它本身不定义动画过程——必须先用 @keyframes 命名一段关键帧规则，再通过 animation-name 引用。
典型写法：
立即学习“前端免费学习笔记（深入）”；
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.element {
animation: slideIn 0.4s ease-out forwards;
}
注意点：
-
forwards保证动画停在最后一帧，否则元素会“弹回”初始状态 - 不要用
animation-delay模拟“hover 后延迟出现”，它只控制播放起点，不影响触发时机；真正要做悬停延迟，得结合transition-delay或 JS 控制 class 添加时机 -
animation-fill-mode: backwards可让动画未开始前就应用from样式，但仅对首次播放有效，循环动画（infinite）下意义有限
transition 和 animation 选哪个？看控制粒度
如果动画由用户交互直接触发（比如按钮 hover、菜单展开），且只需要两个状态间平滑切换，transition 更轻量、更易维护。它依赖状态变更，天然契合 CSS 的声明式逻辑。
如果需要多阶段运动（如弹跳、路径移动）、循环播放、或脱离用户操作自主运行（比如加载指示器），就必须用 animation。
二者也能共存：比如用 animation 做图标旋转，同时用 transition 控制父容器的缩放，互不干扰。
性能提示：优先用 transform 和 opacity，它们能走合成层（compositor），避免触发布局（layout）和绘制（paint）。别对 width、left、background-color（旧版浏览器）做长时动画。
JS 主动控制 animation 播放状态的实用技巧
纯 CSS 动画有时不够灵活，比如想暂停、重播、或根据数据动态调整持续时间。这时可以用 JS 操作 animation-play-state 或切换 animation-name。
示例：点击按钮重播一次入场动画
el.addEventListener('click', () => {
el.style.animation = 'none';
el.offsetHeight; // 强制重排
el.style.animation = 'slideIn 0.4s ease-out';
});
更稳妥的方式是切换 class：
- 定义
.animate-slideIn { animation: slideIn 0.4s ease-out; } - 移除再添加该 class，利用浏览器对 class 切换的重排机制
- 避免直接操作
style.animation，防止内联样式覆盖 CSS 文件中的其他animation-属性
复杂交互动画中，CSS 动画只是表现层，真正难的是状态同步——比如一个元素正在 animation 中，此时用户又点了关闭，就得判断是否中断、回退，还是忽略。这类逻辑往往得靠 JS 维护播放状态标记，而不是只靠 CSS。
