Javascript 如何触发超链接列表中的每个链接以在单击时设置动画（轻触触摸屏）

我有一个链接列表，我不想在悬停时应用任何动画，但想在单击时应用“outro”动画。我有动画来做我想要它做的事情，但是点击任何链接都会将整个列表作为一个单元移动，当然，这不是链接列表的要点。我确信这需要一个简单的jquery调整，但我几乎无法阅读jquery，更不用说编写它了。如果有人能告诉我为什么会出问题（以及如何解决），我将不胜感激。这是deets：

<div class="content-wrapper">
   <div class="stage">
   <ul class="all-links">
     <li class='each-link'><a class="thankyou" href="https://google.com" target="_blank" rel="noopener">Google</a></li>
     <li class="each-link"><a class="thankyou" href="https://wikipedia.org" target="_blank" rel="noopener">Wikipedia</a></li>
     <li class="each-link">
       <a class="thankyou" href="https://goodreads.com" target="_blank" rel="noopener">Goodreads</a></li>
   </ul>
 </div>
</div>

---

这将选择整个网页上的所有链接。可能不是你想要的

$("a")

修正：

---

啊，我忘了提一下，我希望链接在返回到列表中原来的位置之前，在“后台”停留几秒钟。当前，它在完成动画后立即弹出到左侧。再次感谢。您应该能够修改关键帧计时来执行此操作。好的，也可以。再次感谢，就这样！我知道这对说jquery的人来说很简单。谢谢。如果你不介意的话，我还有一个简短的问题。尽管将动画填充模式设置为“前进”，但它在动画完成后会立即返回到起始位置。不用说（即使我是），我还是希望它在新页面加载时保持在“后台”。（我设置了一个页面加载延迟，让outro有时间完成它的工作）。我已经破解了一个解决办法，让动画达到左边：100%；以50%的速度运行，然后一直运行到1000%以消磨时间。但是有一个jquery脚本可以替代它吗？fill forwards没有完成它的工作，因为你在动画结束后删除了road runner类…当然！尽管受到jquery的挑战，我还是应该猜测到这一点。再次感谢你。

$(document).ready(function(){
        $("a").click(function(){
            $(".each-link").addClass("road-runner");
        });


        $('.each-link').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
             $(this).removeClass("road-runner");
        });
    });

$("a")

// Select every anchor with a parent that has the "each-link" class.
$(".each-link a").click(function() {
  // Add class to the the parent of the currently clicked link with "each-link" class.
  $(this).closest(".each-link").addClass("road-runner");
});