title: JQuery loop text animation?
body: <p>I can't get my text animation to loop for my assignment. It has been created using CSS, JQuery and HTMl respectively and runs perfectly but I have been trying and failing to put it on a continuous loop,
   my code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).load(function() {
    setTimeout(function() {
      $('.fly-in').removeClass('hidden');
    }, 700);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#fly-in {
    position: absolute;
    left: 50%;
    top: 50%;
    list-style: none;
    transform: translateX(-50%) translateY(-50%);
  }
  
  fly-in li {
    display: inline-block;
    margin-right: 30px;
    font-family: sans-serif, helvetica;
    font-weight: 600;
    font-size: 38px;
    color: #000000;
    opacity: 1;
    transition: all 2.8s cubic-bezier(0.6, -.005, 0.32, 1.75);
  }
  
  .fly-in.hidden li {
    opacity: 0;
  }
  
  .fly-in.hidden li:nth-child(1) {
    transform: translateX(150px) translateY(-170px);
  }
  
  .fly-in.hidden li:nth-child(2) {
    transform: translateX(-210px) translateY(170px);
  }
  
  .fly-in.hidden li:nth-child(3) {
    transform: translateX(20px) translateY(-100px);
  }
  
  .fly-in.hidden li:nth-child(4) {
    transform: translateX(-100px) translateY(-20px);
  }
  
  .fly-in.hidden li:nth-child(5) {
    transform: translateX(-70px) translateY(-200px);
  }
  
  .fly-in.hidden li:nth-child(6) {
    transform: translateX(200px) translateY(70px);
  }
  
  .fly-in.hidden li:nth-child(7) {
    transform: translateX(30px) translateY(200px);
  }
  
  .fly-in.hidden li:nth-child(8) {
    transform: translateX(30px) translateY(-100px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="fly-in hidden card-title"&gt;
    &lt;li&gt;K&lt;/li&gt;
    &lt;li&gt;E&lt;/li&gt;
    &lt;li&gt;Y&lt;/li&gt;
    &lt;li&gt;D&lt;/li&gt;
    &lt;li&gt;A&lt;/li&gt;
    &lt;li&gt;T&lt;/li&gt;
    &lt;li&gt;E&lt;/li&gt;
    &lt;li&gt;S&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The animation works but I can't get it to loop
  Sorry if this question is confusing btw I'm very new to coding!</p>