前言——我想玩动画但是不管怎样都不行啊

你看，前端开发最酷的就是用JS给CSS加个class，点点点就能让元素跑起来。可我遇到一个坑：点击两次第二次啥也没反应。 造起来。 为什么呢？别急，我会把它拆开说说保证你读完之后可以把动画玩转。

问题描述——动画只跑一次怎么办？

我们先把常见场景搬出来：有一个按钮， 一个盒子；点击按钮时给盒子加个class “animate”，盒子跑动；再点一次加同一个class，却不动了。下面是最典型的代码：，看好你哦！

// 假设我们有一个盒子
var box = document.querySelector;
// 点击事件
box.onclick = function{
    // 移除动画类
    box.classList.remove;
    // 立马又添加
    box.classList.add;
};

看起来没啥大问题， 但实际运行时第二次不会触发，主要原因是浏览器认为“animate”这个class没有真正被移除，还是在同一帧里被重新加入，我算是看透了。。

为什么会这样？浏览器到底怎么回事儿？

浏览器渲染分成几步：解析HTML、构建DOM树、计算样式、布局、绘制。JS在施行完后会把DOM更新推到下一个宏任务队列里 如果你马上做了 remove + add， 我们都曾是... 这两个操作都在同一宏任务里完成，浏览器根本没有机会去重绘。于是它觉得元素状态没变，就直接跳过动画。

解决思路：延迟一下让浏览器有时间休息一下。

说到底。 常用的做法是给 remove + add 间隔一个微小的延迟，比如 setTimeout 或者 requestAnimationFrame。这里推荐用 setTimeout， 主要原因是更容易理解：

// 正确写法
var box = document.querySelector;
function restartAnimation{
    // 先移除
    box.classList.remove;
    // 延迟几毫秒再加回去
    setTimeout{
        box.classList.add;
    }, 50); // 50ms 就够了你可以改成更小或更大
}
box.onclick = restartAnimation;

这段代码在第一次点击时正常跑；第二次点击就会先把类删掉，然后等待50毫秒后再添加，从而触发新的动画。

setTimeout 为什么能工作？

主要原因是 setTimeout 会把回调函数放进异步队列， 在当前同步任务结束后才施行，这意味着 DOM 的变动已经提交给渲染引擎，可以重新计算样式并开始新的关键帧，嗐...。

还有 requestAnimationFrame 的办法

// 更“酷”的写法， 用 RAF
function restart {
    box.classList.remove;
    requestAnimationFrame{
        requestAnimationFrame{
            box.classList.add;
        });
    });
}
box.onclick = restart;

累并充实着。 两层 RAF 是为了确保浏览器真的完成了一次重排和重绘，再开始新的关键帧。不过如果你只是想搞清楚原理，setTimeout 就够用了。

多种实现方式——菜单栏、按钮、代码三种途径！

1️⃣ 菜单栏触发：可以给导航条里的每个菜单项绑定 onclick，然后调用上面那个函数。这样用户在切换页面时也能看到动画效果。

也许吧... 2️⃣ 按钮触发：直接像上面那样，把按钮绑定到 restart 函数即可。

3️⃣ 动态代码注入：如果你想在页面加载完毕后自动为所有符合条件的元素添加监听，可以这么写：

// 页面完全加载后施行
document.addEventListener{
    var boxes = document.querySelectorAll;
    boxes.forEach{
        b.addEventListener{
            b.classList.remove;
            setTimeout{b.classList.add;},50);
        });
    });
});

注意事项——别忘记清理 CSS 或 JS 冗余！

• 不要在 CSS 中使用 animation-fill-mode:forwards; 否则第一次播放后状态会保持， 下一次再加类可能还是同一帧，不会再跑。
• 如果你的 keyframes 用到了百分比或者从某个百分比开始， 会导致重置更麻烦，要么改成 from/to，要么手动设置 transform 为初始值。
• 不同浏览器对 setTimeout 的精度不一样， 小于10ms可能被合并为10ms，你可以根据需要调整延迟时间，但一般30~50ms 就足够了。
• 如果你用的是 CSS 自己写的 @keyframes， 那记得加 -webkit- 前缀，以兼容老 Safari/Chrome，也别忘了加标准版。
• 记得检查是否有其他 JS 冲突， 比方说第三方库也在修改相同元素的 class 名，否则可能导致冲突无法复现。
• 再说说 如果你想让动画无限循环，只要把 animation 属性改成 infinite，而不是手动重新添加 class，这时候就不用任何 JS 来控制啦！但这通常不是“每次点击都重新开始”的需求哦～.
• 还有一个技巧是利用 CSS 的 :active 或 :hover 状态来驱动 animation，而不需要 JS。但要注意这只能响应鼠标事件， 对于移动端没有 touch 时还是需要 JS.
• 其实最简洁的办法就是： 然后只要鼠标悬停就会触发，而且每次悬停都会重新开始。不过这只是示例而已，你自己决定怎么用~ 。
• PS：如果你真想学习更多关于前端技术， 还可以看看《Java免费学习笔记》之类的书籍，它们往往讲得很详细，但别忘了自己实践哦！否则学进去什么都不会。
结束语：只要记住“remove+delay+add”，就能让任何 CSS 动画按需重播啦～祝编码愉快！ 💻🎉🕺🕺🕺🕺🕺 您可以复制下面这段代码作为练手：
版权所有 ©2026 — 本文仅供学习交流， 请勿用于商业用途，否则请联系作者获得授权。