title: Stop Keyframe animation from automatic start on page load
body: <p>I've got some css and Keyframe animations that I use to run a couple of Div elements. I want the css and keyframe animations only to start when i click my buttom. My problem is, they start on there own and then the animation-delay has run out and renders the button useless. </p>
  
  <p>Here is the code I'm trying. </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>$(document).ready(function(){
      $("#bt1").click(function(){
          $(".animation-box").addClass("first-text", "second-text", "third-text", "fourth-text", "fifth-text");
      });
  
  
      $('.animation-box').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
           $(this).removeClass("first-text", "second-text", "third-text", "fourth-text", "fifth-text");
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>            @keyframes topFadeOut {
              0% {
                  position: absolute;
                  top: 10%;
                  opacity: 0;
              }
  
              75% {
                  position: absolute;
                  top: 50%;
                  opacity: 1;
              }
  
              100% {
                  opacity: 0;
              }
              }
  
              @keyframes bottomFadeOut {
              0% {
                  position: absolute;
  
                  opacity: 0;
              }
  
              75% {
                  position: absolute;
  
                  opacity: 1;
              }
  
              100% {
                  opacity: 0;
              }
  
              }
  
              @keyframes topFadeOutVertical {
              0% {
                  position: absolute;
                  top: 60%;
                  opacity: 0;
  
              }
  
              75% {
                  position: absolute;
                  top: 65%;
                  opacity: 1;
  
              }
  
              100% {
                  opacity: 0;
  
              }
              }
  
              @keyframes rightFadeInOut {
              0% {
                  position: absolute;
                  right: -3rem;
                  opacity: 0;
  
              }
  
              75% {
                  position: absolute;
                  right: 40%;
                  opacity: 1;
  
              }
  
              100% {
                  opacity: 0;
                  right: 10rem;
  
              }
              }
  
              @keyframes fadeInOut {
              0% {
                  opacity: 0;
  
              }
  
              45% {
                  opacity: 1;
  
              }
  
              100% {
                  opacity: 0%;
  
              }
              }
  
              .first-text {
              font-size: 4.4rem;
              position: absolute;
              left: 23%;
              top: 70%;
              opacity: 0;
              animation-name: topFadeOut;
              animation-duration: 5s;
              color: black;
              animation-play-state: i;
              }
  
              .second-text {
              font-size: 4.4rem;
              position: absolute;
              top: 50%;
              opacity: 0;
              animation-name: rightFadeInOut;
              animation-delay: 4s;
              animation-duration: 6s;
              color: black;
              animation-play-state: inherit;
              }
  
              .third-text {
  
              font-size: 4.4rem;
              position: absolute;
              left: 27%;
              top: 50%;
              opacity: 0;
              animation-name: topFadeOutVertical;
              animation-delay: 8s;
              animation-duration: 6s;
              color: black;
              white-space: nowrap;
              animation-play-state: inherit;
              }
  
              .fourth-text {
              font-size: 4.4rem;
              position: absolute;
              top: 55%;
              left: 27%;
              opacity: 0;
              color: black;
              animation-name: fadeInOut;
              animation-delay: 12s;
              animation-duration: 7s;
              animation-play-state: inherit;
              }
  
              .fifth-text {
              font-size: 5rem;
              position: absolute;
              left: 30%;
              top: 50%;
              opacity: 0;
              color: black;
              animation-name: bottomFadeOut;
              animation-delay: 16s;
              animation-duration: 9s;
              animation-play-state: inherit;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="bt1" class="button button5"&gt;&lt; R30K&lt;/button&gt;
  &lt;button id="bt2" class="button button5"&gt;R30K - R70K&lt;/button&gt;
  &lt;button id="bt3" class="button button5"&gt;&gt; R70K&lt;/button&gt;
  
  &lt;section class="animation-box"&gt;
      &lt;div class="first-text"&gt;Starting winner selection process&lt;/div&gt;
      &lt;div class="second-text"&gt;Identifying eligible entries&lt;/div&gt;
      &lt;div class="third-text"&gt;Uploading eligible entries&lt;/div&gt;
      &lt;div class="fourth-text"&gt;Shuffling eligible entries&lt;/div&gt;
      &lt;div class="fifth-text"&gt;And the winner is...&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So when running that, the Keyframe animation starts on page load, causing me not to be able to use the button function.</p>
  
  <p>What I want is to know how to stop keyframe from starting when page loads and to run the keyframe ONLY when button is clicked.</p>
  
  <p>You're help is greatly appreciated.</p>