title: Changed CSS class before applying class does not take effect
body: <p>Been at this for a while and was wondering if someone could give a pointer:</p>
  
  <p>Essentially, I'm trying to update a css animation's class before applying it to the element to be animated but the updated elements in the class won't apply. In the example, the iteration count, duration, and delay do not apply when I try the animation but if I have them in the class already, they work fine (they're commented out right now).</p>
  
  <p>Any ideas or another method to update animations before applying them? Would I have to make separate classes for each variation of my animation?"</p>
  
  <p>Thank you.</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(){
    $(".blsAnimation").css("animation-iteration-count:", "1, 2, 1, 1");
    $(".blsAnimation").css("animation-duration", "1s, 2s, 2s, 1s");
    $(".blsAnimation").css("animation-delay", "1s, 1s, 6s, 7s");
    $('#bls').addClass('blsAnimation');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*circle for bls*/
  .circle {
    height: 10vw;
    width: 10vw;
    background: black;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 40vh;
  }
  
  .blsAnimation {
    animation-name: moveCenterLeft, moveLeftRight, moveLeftCenter, fadeOut;
    /*animation-duration: 1000ms, 2000ms, 1000ms, 1000ms;*/
    /*animation-delay: 1000ms, 2000ms, 6000ms,7000ms;*/
    animation-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    /*animation-iteration-count: 1, 2, 1, 1;*/
    animation-direction: normal, alternate, normal, normal;
    animation-fill-mode: none, none, none, forwards;
  }
  
  
  /*animations for moving back and forth*/
  @keyframes moveCenterLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-40vw);
    }
  }
  
  @keyframes moveLeftRight {
    0% {
      transform: translateX(-40vw);
    }
    100% {
      transform: translateX(40vw);
    }
  }
  
  @keyframes moveLeftCenter {
    0% {
      transform: translateX(-40vw);
    }
    100% {
      transform: translateX(0vw);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
    &lt;!-- If IE use the latest rendering engine --&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Coach Rory&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script type='text/javascript' src="script.js"&gt;&lt;/script&gt;
      &lt;script type ='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.2.0/screenfull.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
  
    &lt;div class="circle" id = "bls"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>