title: Javascript add/remove animation class, only animates once
body: <p>Trying to build a time picker, that is supposed to animate the change of input. I thought I'd do this by adding and removing an animation class from CSS. The problem is, that it only works the first time. </p>
  
  <p>I tried to set an interval to start with, that removed the class after a certain amount of time, slightly above the animation duration, but that reduced the animation time of the animation with each click, and by the third or fourth click, it no longer animated. </p>
  
  <p>Then I just opted to check if the class existed to start with, remove it to start with, then add it. To make sure it starts from scratch each time. But now it only animates the very first time.</p>
  
  <p><a href="https://codepen.io/SkriptKiddy/pen/QWLXNNB" rel="nofollow noreferrer">Codepen</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>
      &lt;div id="wrapper"&gt;
        &lt;div id="uphour"&gt;&lt;/div&gt;
        &lt;div id="upminute"&gt;&lt;/div&gt;
        &lt;div id="upampm"&gt;&lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div id="hour" data-hour="1"&gt;2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div id="minute" data-minute="1"&gt;50&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="animated"&gt;
          &lt;div id="ampm" data-minute="AM"&gt;AM&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="downhour"&gt;&lt;/div&gt;
        &lt;div id="downminute"&gt;&lt;/div&gt;
        &lt;div id="downampm"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
  </code></pre>
  
  <p>(the data attributes here are not currently in use)</p>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>
      $finger: 2cm;
      $smallfinger: .3cm;
  
      #wrapper {
        display: grid;
        grid-template-columns: $finger $finger $finger;
        grid-template-rows: $finger $finger $finger;
        grid-column-gap: $smallfinger;
        grid-row-gap: $smallfinger;
        position:absolute;
        width: 100vw;
        background: #FF00FF;
        height: calc( (#{$finger} * 3) + (#{$smallfinger} * 4) );
        box-sizing: border-box;
        bottom:$finger;
        left:0;
        padding:0;
        margin:0;
        align-content: center;
        justify-content: center;
        }
  
      #uphour,
      #upminute,
      #upampm,
      #downhour,
      #downminute,
      #downampm {
        display: flex;
        background: rgba(255,0,0,.4);
        width: $finger;
        height: $finger;
        margin-left: 1vw;
        margin-right: 1vw;
        border: 1px solid black;
      }
  
      .animated {
        display: flex;
        width: $finger;
        height: $finger;
        margin-left: 1vw;
        margin-right: 1vw;
        border: 1px solid black;
        overflow:hidden;
      }
  
  
      #minute, #hour, #ampm {
        display: flex;
        /*background: rgba(255,0,0,.4); for testing of animation only*/
        width: $finger;
        height: $finger;
        border: 0;
        position: relative;
        align-items: center;
        justify-content: center;
        font-size: .8cm;
      }
  
      .animateStart {
        -webkit-animation-name: downandout; /* Safari 4.0 - 8.0 */
        animation-name: downandout;
        -webkit-animation-duration: 250ms; /* Safari 4.0 - 8.0 */
        animation-duration: 250ms;
        /*-webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;*/
        transition-timing-function: cubic-bezier(1,0,0,1);
      }
  
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes downandout {
        0%   {top: 0; left: 0;}
        10%  {top: 100%; left:0;}
        50%  {top: 100%; left: 100%;}
        90% {top: -100%; left:100%;}
      }
  
      /* Standard syntax */
      @keyframes downandout {
        0%   {top: 0; left: 0;}
        40%  {top: 100%; left:0;}
        42%  {top: 100%; left: calc(#{$finger} * 2);}
        48% {top: -110%; left: calc(#{$finger} * 2);}
        50% {top: -110%; left:0;}
        100% {top: 0; left:0;}
      }
  
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>
      var uphourEl = document.getElementById("uphour");
      var downhourEl = document.getElementById("downhour");
      var upminuteEl = document.getElementById("upminute");
      var downminuteEl = document.getElementById("downminute");
      var upampmEl = document.getElementById("upampm");
      var downampmEl = document.getElementById("downampm");
  
      uphourEl.addEventListener("click", increaseHour);
      downhourEl.addEventListener("click", decreaseHour);
      upminuteEl.addEventListener("click", increaseMinute);
      downminuteEl.addEventListener("click", decreaseMinute);
      upampmEl.addEventListener("click", swapAMPM);
      downampmEl.addEventListener("click", swapAMPM);
  
      var hourEl = document.getElementById("hour"); 
      var minuteEl = document.getElementById("minute"); 
      var ampmEl = document.getElementById("ampm"); 
  
      function increaseHour() {
        let value = hourEl.innerHTML;
        if (value &gt; 11) {
            value = 1
        } else  {
          value++;
        }
        hourEl.innerHTML = value;
        console.log(value);
      }
  
      function decreaseHour() {
        let value = hourEl.innerHTML;
        if (value &lt; 2) {
            value = 12
        } else  {
          value--;
        }
        hourEl.innerHTML = value;
        console.log(value);
      }
  
      function increaseMinute() {
        let value = minuteEl.innerHTML;
        if (value &gt; 58) {
            value = 0
        } else  {
          value++;
        }
        minuteEl.innerHTML = value;
        console.log(value);
      }
  
      function decreaseMinute() {
        let value = minuteEl.innerHTML;
        if (value &lt; 1) {
            value = 59
        } else  {
          value--;
        }
        minuteEl.innerHTML = value;
        console.log(value);
      }
  
      function swapAMPM() {
        let value = ampmEl.innerHTML;
        if (ampmEl.hasAttribute("class")) {
          ampmEl.removeAttribute("class");
        }
        ampmEl.setAttribute("class", "animateStart");
        if (value === "AM") {
            value = "PM";
            ampmEl.innerHTML = value;
            console.log("Changed from AM");
        } else  {
          value = "AM";
          ampmEl.innerHTML = value;
          console.log("Changed from PM");
        }
      }
  </code></pre>
  
  <p>..it's the swapAMPM function (at the end of the Javascript) I'm currently not getting to behave as expected. </p>
  
  <p>Any suggestions on why I am experiencing this behavior? Is there some best practice I am missing? </p>