Animation Pause Not Working
<p>I am making a music loader type thing, and want to be able to toggle the playing on and off by pausing it. I have been unsuccessful in doing this but have gotten it to half work on something simpler which is here: </p>

<p><a href="http://codepen.io/TheAndersMan/pen/MjMrje" rel="nofollow">http://codepen.io/TheAndersMan/pen/MjMrje</a></p>

<p>Here is the link to what I am trying to get to work:</p>

<p><a href="http://codepen.io/TheAndersMan/pen/qazVGX" rel="nofollow">http://codepen.io/TheAndersMan/pen/qazVGX</a></p>

<p>Here is my code:</p>

<p>HTML:</p>

<pre><code>    &lt;button class="toggle"&gt;Pause&lt;/button&gt;
    &lt;div class="music"&gt;
      &lt;div class="barOne bar"&gt;&lt;/div&gt;
      &lt;div class="barTwo bar"&gt;&lt;/div&gt;
      &lt;div class="barThree bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>SCSS:</p>

<pre><code>    body {
      overflow: hidden;
    }

    .toggle {
      font-family: roboto;
      background: #3f51b5;
      border: none;
      font-size: 3em;
      color: white;
      border-radius: 3px;
      margin: 0 auto;
      display: block;
      cursor: pointer;
      outline: none;
    }

    .music {
      width: 20vw;
      display: flex;
      margin: 30vh auto;
      .bar {
        width: calc(20vw / 3);
        background: #ff5252;
        height: 15vw;
        margin-left: .5vw;
      }
      .barOne {
        height: 10vw;
        margin-top: 5vw;
        animation: barOne 0.75s linear infinite;
      }
      .barTwo {
        height: 18vw;
        margin-top: -3vw;
        animation: barTwo 1s linear infinite;
      }
      .barThree {
        height: 14vw;
        margin-top: 1vw;
        animation: barThree 0.75s linear infinite;
      }
    }

    @keyframes barOne {
      0% {
        height: 10vw;
        margin-top: 5vw;
      }
      50% {
        height: 7.5vw;
        margin-top: 7.5vw;
      }
      100% {
        height: 10vw;
        margin-top: 5vw;
      }
    }
    @keyframes barTwo {
      0% {
        height: 18vw;
        margin-top: -3vw;
      }
      50% {
        height: 10vw;
        margin-top: 5vw;
      }
      100% {
        height: 18vw;
        margin-top: -3vw;
      }
    }
    @keyframes barThree {
      0% {
        height: 14vw;
        margin-top: 1vw;
      }
      50% {
        height: 20vw;
        margin-top: -5vw;
      }
      100% {
        height: 14vw;
        margin-top: 1vw;
      }
    }

    .paused {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
    }        
</code></pre>

<p>JS:</p>

<pre><code>    var state = true;

    document.querySelector(".toggle").addEventListener("click", function() {
      var toggle = document.querySelector(".toggle");
      var one = document.querySelector(".barOne");
      var two = document.querySelector(".barTwo");
      var three = document.querySelector(".barThree");
      if (state === true) {
        state = false;
        toggle.innerHTML = "Play"
        one.classList.add("paused");
        // one.style.animation = "none"
        two.classList.add("paused");
        three.classList.add("paused");
      }
      else {
        state = true;
        toggle.innerHTML = "Pause"
        one.classList.remove("paused");
        two.classList.remove("paused");
        three.classList.remove("paused");
      }
    });
</code></pre>

<p>Sorry, it's a lot I want to give the full picture though.</p>

<p>Thanks in advance!</p>