JavaScript控制CSS动画的核心是通过class切换触发动画并监听animationend事件，辅以style动态调整和play-state暂停/恢复，实现高效协作。
JavaScript 控制 CSS 动画，核心是通过操作元素的 class 或 style 属性来触发动画，再配合事件监听或定时器实现精确控制。不是直接“写动画”，而是“调度动画”。
用 class 切换触发 CSS 动画
最常用也最推荐的方式：把动画定义在 CSS 中（用 @keyframes），JavaScript 只负责添加/移除 class 来启动或重置动画。
- CSS 里定义好动画关键帧和类名，比如：
@keyframes slideIn { from { transform: translateX(-100px); } to { transform: translateX(0); } }
.animate-slide { animation: slideIn 0.3s ease-out; } - JS 中用
element.classList.add('animate-slide')触发动画；想重复播放，可先remove再add，或用offsetWidth强制重排触发重播 - 注意：同一元素连续两次加同一个 class 不会重新触发动画，需先移除再加，或用
animation-play-state配合
监听动画完成事件
知道动画什么时候结束，才能做后续动作（比如切换内容、启用按钮）。
- 监听
animationend事件：element.addEventListener('animationend', () => { console.log('动画结束了'); }); - 事件对象中
e.animationName可区分不同动画，避免误响应 - 注意兼容性：部分老浏览器需监听
webkitAnimationEnd等前缀版本
用 JS 动态修改 animation 属性
适合需要运行时调整持续时间、延迟或方向的场景。
立即学习“Java免费学习笔记（深入）”；
- 直接设置内联样式：
el.style.animationDuration = '0.5s';
el.style.animationDelay = '0.1s';
el.style.animationDirection = 'reverse'; - 修改后不会自动重播动画，如需重放，可结合 class 切换或重置
animation值（例如设为空再设回） - 慎用：频繁操作 style 可能引发重排重绘，简单切换更高效
暂停/恢复动画（play-state）
适合 hover 暂停、交互控制等需求。
- CSS 中预先定义：
.paused { animation-play-state: paused; }
.running { animation-play-state: running; } - JS 控制：
el.classList.toggle('paused'); - 注意：
animation-play-state只影响正在播放的动画，对未开始或已结束的无效
基本上就这些。重点不在“怎么写动画”，而在“怎么让 JS 和 CSS 动画顺畅协作”——class 切换 + 事件监听 + 少量 style 调整，足够覆盖绝大多数交互动画需求。
