点击时才开始执行CSS动画的正确方法是用JavaScript动态添加含animation声明的class，并在animationend事件中移除该class。
点击时才开始执行 CSS 动画，不能一加载就动
关键在于动画默认不播放，只在元素被点击后才触发一次。CSS 本身没有“播放动画”的指令，所以得靠 JavaScript 切换 class 来激活 @keyframes 定义的动画。直接写 animation: name 0.3s 在元素上，页面一渲染就会立刻执行——这不是你想要的。
正确做法是：先定义好动画，但不在初始 class 中启用；点击时用 JS 给元素添加一个带 animation 声明的新 class；动画播完后自动移除该 class（避免重复点击无效或卡顿）。
如何用 onclick 和 classList 控制动画触发
别用内联 onclick="..." 写一堆逻辑，维护性差还容易出错。推荐绑定事件监听器，并配合 animationend 事件清理 class：
- 给目标元素设置初始状态，
animation: none或干脆不写动画相关样式 - 定义一个专门触发动画的 class，比如
.animate-click，里面写animation: bounce 0.4s ease-out - JS 中监听点击，在回调里先
element.classList.add('animate-click') - 监听
animationend，在回调中element.classList.remove('animate-click')
示例片段：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 100px;
height: 100px;
background: #4a90e2;
}
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.animate-click {
animation: bounce 0.4s ease-out;
}
const box = document.querySelector('.box');
box.addEventListener('click', () => {
box.classList.add('animate-click');
box.addEventListener('animationend', () => {
box.classList.remove('animate-click');
}, { once: true });
});
为什么不用 setTimeout 移除 class？
因为动画时长可能被 CSS 变量、媒体查询或用户偏好（如 prefers-reduced-motion）动态修改，硬写 setTimeout(..., 400) 极易失步。浏览器触发的 animationend 事件才是真实播放结束的信号。
注意几个坑：
-
animationend是冒泡事件，要确保监听的是目标元素本身，不是父容器 - 加
{ once: true }防止多次点击注册多个监听器 - 如果动画被取消（例如 class 被提前移除），
animationend不会触发，此时可考虑兜底逻辑（比如同时用setTimeout清理，但仅作 fallback）
移动端点击延迟和重复触发问题
在 iOS Safari 或某些安卓 WebView 中，快速连续点击可能触发多次动画，或者因 300ms 延迟导致响应滞后。解决方式很简单：
- 给元素加
touch-action: manipulation，告诉浏览器这个区域只做操作，禁用双击缩放等行为 - 在点击回调开头加防抖：用
if (element.classList.contains('animate-click')) return;忽略进行中的动画 - 避免用
onclick属性，它在部分 WebView 中对 touch 事件支持不稳定
真正难处理的不是怎么让动画动起来，而是怎么让它在各种设备、各种系统设置下都只动一次、动得准、动完干净利落。动画类名加了不删，下次点就没反应；删早了，动画被截断；删晚了，样式残留影响后续交互——这些细节比写 keyframes 本身更花时间。
