网页中的动画如果只是页面加载后自动播放，用户的参与感会很弱。真正的交互动画，是由用户的行为（点击、悬停、触摸）来驱动动画的开始、暂停或重置。实现这个效果的核心逻辑只有一句话：动画本身由CSS定义好，但它的启动钥匙交给JavaScript的事件监听器来保管。下面从动画触发机制的差异讲起，逐步给出完整的实现方案。
一、animation与transition在事件触发上的本质区别
在动手写代码之前，必须先搞清楚CSS中两种动画机制的差异，因为它们配合点击事件时的写法完全不同。transition是过渡动画，它的特点是必须有状态变化才会生效。元素从状态A变到状态B时，浏览器会自动补间中间帧。因此用transition做点击动画，通常的做法是点击时切换一个类名，让元素的两个状态之间产生过渡。它的局限在于：只有起点和终点两个状态，无法实现复杂的多关键帧动画。
animation则配合@keyframes使用，可以定义任意多个关键帧，动画表现力更强。它的触发方式通常是把animation属性写在某个类名里，默认不添加这个类，动画就不播放；点击时通过JavaScript把这个类加上，动画立即开始。这种"类名即开关"的模式是目前最主流的交互动画实现方式，结构清晰，逻辑与样式分离。
两者的选择标准可以简单概括为：简单的两态切换（如按钮变色、卡片翻转、菜单展开收起）用transition更省代码；需要弹跳、抖动、旋转一周、多段位移这类复杂效果，就用animation加keyframes。实际项目里两者经常混用，并不冲突。
/* transition方案：两态过渡 */
.btn {
background: #409eff;
transition: transform 0.3s ease, background 0.3s ease;
}
.btn:active {
transform: scale(0.92);
background: #2b7fd4;
}
/* animation方案：多关键帧弹跳 */
@keyframes bounce {
0% { transform: scale(1); }
30% { transform: scale(1.25); }
60% { transform: scale(0.85); }
100% { transform: scale(1); }
}
.btn.animate {
animation: bounce 0.6s ease;
}二、用addEventListener绑定点击事件触发动画的完整示例
接下来是重点：如何把点击事件和动画衔接起来。标准的做法分三步：第一步用querySelector或getElementById拿到目标元素；第二步用addEventListener监听click事件；第三步在回调函数里操作元素的classList，添加或移除动画类名。整个流程不依赖任何第三方库，原生代码就能完成。
下面是一个完整可运行的例子：点击按钮后，一个卡片元素执行弹跳动画。这里有一个关键的细节——如果希望动画每次点击都能重新播放，必须在动画结束后把类名移除，否则第二次点击时类名已经存在，浏览器不会重新触发动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.card {
width: 160px;
height: 160px;
background: #409eff;
border-radius: 12px;
margin: 60px auto;
cursor: pointer;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-12px); }
50% { transform: translateX(12px); }
75% { transform: translateX(-6px); }
100% { transform: translateX(0); }
}
.card.animating {
animation: shake 0.5s ease;
}
</style>
</head>
<body>
<div class="card" id="card"></div>
<script>
var card = document.getElementById('card');
card.addEventListener('click', function () {
// 防止动画播放中重复添加类名
if (card.classList.contains('animating')) {
return;
}
card.classList.add('animating');
// 监听动画结束事件，移除类名以便下次触发
card.addEventListener('animationend', function onEnd() {
card.classList.remove('animating');
card.removeEventListener('animationend', onEnd);
});
});
</script>
</body>
</html>
这段代码里用到了animationend事件，它是浏览器在CSS动画播完时自动派发的原生事件，与它对应的还有animationstart和animationiteration。利用这些事件可以在动画结束后执行回调，比如移除类名、更新计数、延迟显示下一个元素等。注意如果元素上同时有transition动画，对应的事件名是transitionend，不要混淆。
另外，示例中还做了一层防重复点击的保护：动画播放期间如果用户连续快速点击，直接return跳过。如果不做这个处理，虽然视觉上问题不大，但频繁的类名增删可能造成动画闪烁，也浪费性能。更优雅的做法是用一个布尔标志位控制，或者干脆在动画期间给元素设置pointer-events: none。
三、移动端适配与重置动画的进阶技巧
在移动设备上，click事件会有大约300毫秒的延迟问题（现代浏览器在设置了正确的viewport后已基本消除），更重要的是触摸操作应该监听touch事件系列才能获得最好的响应速度。touchstart在手指接触屏幕的瞬间触发，比click快得多，适合做即时反馈类动画，比如按下时的缩放。可以这样组合使用：
var btn = document.querySelector('.press-btn');
// 手指按下立即触发按压动画
btn.addEventListener('touchstart', function () {
btn.style.transform = 'scale(0.9)';
}, { passive: true });
// 手指离开恢复原状
btn.addEventListener('touchend', function () {
btn.style.transform = 'scale(1)';
});
// 桌面端保留click逻辑
btn.addEventListener('click', function () {
console.log('按钮被激活');
});还有一个场景值得掌握：同一个动画需要反复触发，但不想通过增删类名来做。这时可以利用浏览器的"重排刷新"技巧——移除类名后，强制读取元素的offsetWidth属性触发一次重排，再重新添加类名，动画就会从头播放。代码如下：
function replay(el) {
el.classList.remove('animating');
// 强制浏览器回流，使类名移除立即生效
void el.offsetWidth;
el.classList.add('animating');
}这种写法在一些轮播图、点赞特效中很常见。原理是浏览器对样式变更做了批量合并优化，移除和添加类名如果发生在同一帧内，会被合并成"没有变化"，插入一行读取布局属性的代码，等于强制浏览器立刻计算一次当前样式，打断合并过程。
最后提醒几个容易踩的坑。第一，animation-fill-mode要设置好，如果动画结束后需要保持最终状态，记得写forwards，否则元素会瞬间跳回初始样式。第二，如果动画类名是由JS添加的，注意DOM还没渲染完成时就执行脚本会拿不到元素，脚本应放在body末尾或用DOMContentLoaded事件包裹。第三，频繁触发的动画优先使用transform和opacity这两个属性，它们走GPU合成层，不会引起重排，性能远好于修改width、top这类属性。掌握这些要点后，无论是按钮反馈、点击翻转卡片，还是点击触发一连串的入场动画，都能用同一套思路稳定实现。