Html 在第二次加载页面时停止CSS动画

我在一个收藏夹按钮中添加了一个this，这个按钮工作正常，但当我重新加载页面时，动画再次运行，这在列表页面上造成了干扰。所以，如果单击“收藏夹”按钮一次，并且该对象已成为收藏夹，那么如何控制或停止页面重新加载上的动画呢

CSS代码：

.event\u box.eb\u like i:after{
内容：“；
位置：绝对位置；
左：0；
右：0；
排名：0；
保证金：0自动；
背景：url（../img/alike.svg）0 0无重复；
背景大小：2900%；
高度：100px；
宽度：100px；
} 
我喜欢：之后{
-webkit动画：心跳加速步数（28）0.8s1；
动画：心跳加速（28）0.8s1两步；
}
@-webkit关键帧心脏爆裂{
0% {
背景位置：左；
}
100% {
背景位置：右；
}
}
@关键帧心脏爆裂{
0% {
背景位置：左；
}
100% {
背景位置：右；
}
}

仅通过css无法做到这一点，有两种方法都涉及到一些编码：

（简单）您可以通过js设置cookie并使用它检查 元素已被单击

（过于复杂）如果用户登录，您可以将该操作保存在数据库中，当用户重新加载页面时，您可以检查数据库并打印相应的类

---

实际上，一种可能的解决方案是将密钥存储在浏览器的本地存储器中。你可以这样做：

---

您可以通过创建cookie来实现这一点。如果没有cookie，则运行动画；如果有cookie，则跳过动画。希望此帮助无法检查页面是否已添加书签，但您可以做的是，在有人单击页面时存储cookie，然后第二次检查cookie

var btn = document.getElementsByClassName('btn-love')[0];


btn.addEventListener('click', function(e) {
    if (!window.localStorage.getItem('favorited')) {
    setTimeout(function() {
        document.getElementsByClassName('love')[0].setAttribute('id', '');
        window.localStorage.setItem('favorited',true);
    },1000);
  }
});