Javascript 在setTimeOut中使用addClass实现的单击动画仅在以下情况下发生

我在页面顶部有一些html，如下所示：

<div class="candidate-details">
  <p class="name">Lorem Ipsum</p>
  <p class="occupation">Lorem Ipsum Developer</p>
  <p class="email"><i class="fa fa-envelope" aria-hidden="true"></i> lorem.lololol@gmail.com</p>
  <div class="social-media">
    <a class="social-icon" href="https://github.com/" target="_blank"><i id="gitid" class="fa fa-github fa-lg" aria-hidden="true"></i></a>

    <a class="social-icon" href="https://www.linkedin.com/" target="_blank"><i id="linkedid" class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>

  </div>
</div>

最后是一些CSS：

 .swing {
  -moz-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -o-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -webkit-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

完整代码：

那么我想要实现什么呢？

我想要的是，当用户点击页面底部的链接

Get in touch

，一些平滑的滚动业务随之发生，用户被带到页面顶部，三个图标旋转360度以引起他们的注意我希望每次点击都会发生这种情况。

目前发生了什么？

每次平滑滚动都会成功进行。旋转动画在第一次单击时成功发生，但仅此而已它不会在以后每次单击时重复。

有很多关于CSS动画的问题，只有一次，但似乎没有一个对我有帮助。已经接近了，但没有真正解决任何问题

我希望发生什么？ 除了平滑滚动之外，旋转动画可在用户每次单击

Get in touch

链接时重复

---

谢谢。

这是因为您使用的是动画而不是过渡。更改此项：

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

到

---

这是因为您使用的是动画而不是过渡。更改此项：

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

到

---

一旦它旋转360度，它就旋转了，你似乎不会重置它，所以它就不会再旋转了？没有移除类Acheve吗？使用在页面加载代码中创建的一个事件侦听器，然后只在SetTimeOut中添加类一旦它旋转360度，它旋转了，你似乎不会重置它，所以它不会再次旋转？不会移除类Acheve吗？使用在页面加载代码中创建的一个事件侦听器，然后在SetTimeOutah中添加该类！简单而完美。谢谢，啊！简单而完美。谢谢

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

var animationEnd = 'webkitTransitionEnd mozTransitionEnd MSTransitionEnd oTransitionEnd transitionend';