title: How can I trigger each link in a list of hyperlinks to animate on click (tap on touchscreens)
body: <p>I have a list of links to which I don't want to apply any animation on hover but do want to apply an &quot;outro&quot; animation on click. I've got the animation to do what I want it to do, but clicking on any link moves the entire list as a unit, which, of course, is not the point of a list of links. I'm sure this requires a simple jquery tweak, but I can barely read jquery, much less write it. If someone can tell me why this is going wrong (and how to fix it), I would be grateful. Here're the deets:</p>
  <pre><code>&lt;div class=&quot;content-wrapper&quot;&gt;
     &lt;div class=&quot;stage&quot;&gt;
     &lt;ul class=&quot;all-links&quot;&gt;
       &lt;li class='each-link'&gt;&lt;a class=&quot;thankyou&quot; href=&quot;https://google.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;
       &lt;li class=&quot;each-link&quot;&gt;&lt;a class=&quot;thankyou&quot; href=&quot;https://wikipedia.org&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Wikipedia&lt;/a&gt;&lt;/li&gt;
       &lt;li class=&quot;each-link&quot;&gt;
         &lt;a class=&quot;thankyou&quot; href=&quot;https://goodreads.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Goodreads&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>*, *:before, *:after {
    margin: 0;
    padding: 0;
  }
  
  .content-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #c4a278;
  }
  
  .stage {
    position: absolute;
    top: 30px;
    left: 5%; 
    width: 500px;
    height: auto;
    overflow: hidden;
  }
  
  
  ul.all-links {
    list-style: none;
    width: 100%;
    overflowX:hidden;
  }
  
  .each-link {
     position: relative;
    top: 0;
    left: 0;
    display: block;
  }
  
  a.thankyou {
   color: #762500;
    white-space: nowrap;
    font-family: 'raleway', sans-serif;
      text-align: left;
    font-size: .9em;
    line-height: 1.4em;
    z-index: 2;
    text-decoration: none;
  }
  
  .road-runner {
      animation: beep-beep 2.51s ease-in forwards;
  }
  
  @keyframes beep-beep {
     0% {
    left: 0%
    }
    
    4% {
      transform: translateY(-1vh);
    }
    
    8% {
      transform: translateY(0);
    }
    
    12% {
      transform: translateY(-1vh);
    }
    
    16% {
      transform: translateY(0);
      left: 0%;
    }
    
    21% {
     transform: skewX(0deg); 
    }
    
    25% {
      transform: skewX(-40deg);
    }
    
    100% {
     left: 100%;
      transform: skewX(-40deg);
    }
  }
  
  </code></pre>
  <pre><code>$(document).ready(function(){
          $(&quot;a&quot;).click(function(){
              $(&quot;.each-link&quot;).addClass(&quot;road-runner&quot;);
          });
  
  
          $('.each-link').on(&quot;animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd&quot;, function(){
               $(this).removeClass(&quot;road-runner&quot;);
          });
      });
  
  </code></pre>