使用CSS animation与transition结合可实现更流畅的交互效果。transition负责属性值间的平滑过渡，如颜色、宽度变化；animation则通过@keyframes定义复杂动画，如抖动、弹跳。典型应用如按钮点击反馈：点击触发animation播放一次性抖动效果，结束后通过JavaScript移除类名，transition继续处理其他状态变化。例如提示框先用animation实现缩放弹出，再通过JS添加带transition的类实现淡出。注意避免同一属性同时设置两者导致冲突，利用animationend和transitionend事件精确控制流程，确保动画可重复触发且不干扰常规过渡效果。
在网页开发中，让元素的状态切换更自然流畅，仅靠单纯的 CSS transition 有时无法满足复杂动画需求。通过将 CSS animation 与 transition 配合使用，可以实现更精细的动画控制，比如按钮点击反馈、加载状态切换、菜单展开收起等场景。
理解 transition 与 animation 的分工
transition 适合处理属性值之间的平滑过渡，比如宽度、颜色、透明度的变化。它依赖于状态改变（如 hover、class 切换）触发。而 animation 更适合定义关键帧（@keyframes），实现独立运行、循环或更复杂的视觉效果。
两者结合使用时，通常由 transition 控制常规状态切换，animation 负责一次性播放的动画片段，比如“弹跳提示”、“闪烁高亮”等。
常见使用场景：点击后播放动画并恢复状态
例如一个按钮，点击后需要快速抖动一下表示反馈，然后回到原始状态。这种“一次性动画 + 状态还原”的需求，适合用 animation 播放抖动，transition 控制其他属性的缓动。
立即学习“前端免费学习笔记（深入）”；
示例代码：<button class="btn">点击我</button>
.btn {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
/* 过渡用于背景色、文字颜色等常规变化 */
transition: background 0.3s, color 0.3s;
}
<p>/<em> 定义抖动动画 </em>/
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}</p><p>/<em> 添加类名触发动画 </em>/
.btn.animate {
animation: shake 0.5s ease-in-out;
}</p>
JavaScript 控制动画触发：
document.querySelector('.btn').addEventListener('click', function () {
this.classList.add('animate');
// 动画结束后移除类，避免重复播放
this.addEventListener('animationend', function () {
this.classList.remove('animate');
}, { once: true });
});
这样，点击按钮时播放抖动动画，animation 执行完毕后自动清理类名，transition 仍可继续处理后续的悬停等交互效果。
利用 transition 处理动画结束后的状态渐变
有时候动画结束后，希望某些属性以另一种方式缓动到最终状态。比如一个提示框先缩放弹出（animation），再缓慢淡出（transition）。
做法是：animation 负责初始进入效果，结束后通过 JavaScript 修改类名或内联样式，触发 transition 控制的 opacity 或 transform 渐变。
示例思路：- 元素添加 .popup 类，触发 scale 动画显示
- animation 结束后，添加 .fade 类，该类设置了 transition: opacity 0.5s
- 随后修改 opacity，实现淡出
注意事项与最佳实践
结合使用时需注意以下几点：
- animation 不会自动重播同名动画，必须通过 DOM 重新触发（如移除再添加类名）
- transition 只在属性值变化时生效，静态 class 切换才容易被监听
- 避免同时对同一属性（如 transform）设置 animation 和 transition，容易冲突
- 使用 animationend 和 transitionend 事件精确控制流程
基本上就这些。合理分配 animation 和 transition 的职责，能让界面动效既丰富又可控。不复杂但容易忽略细节。
