title: Moving element on screen and back with keyframes
body: <p>Provided I have following code:</p>
  
  <pre><code>&lt;div class="leftBox"&gt;
      &lt;div class="mainNode"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $('.mainNode').click(function() {
      var element = $('.mainNode');
      if (!element.hasClass('show')) {
          element.removeClass('hide');
          element.addClass('show');
      } else {
          element.removeClass('show');
          element.addClass('hide');
      }
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>and in CSS:</p>
  
  <pre><code>.mainNode {
      width: 160px;
      height: 160px;
  
      border-radius: 50%;
      background-color: red;
      position :relative;
  }
  
  .show {
      -webkit-animation: mymove 1s forwards; /* Safari 4.0 - 8.0 */
      animation: mymove 1s forwards;
  }
  
  .hide {
      -webkit-animation: mymove 1s reverse; /* Safari 4.0 - 8.0 */
      animation: mymove 1s reverse;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes mymove {
      from   {top: 0px;}
      to {top: 200px;}
  }
  
  /* Standard syntax */
  @keyframes mymove {
      from   {top: 0px;}
      to {top: 200px;}
  }
  </code></pre>
  
  <p>What I'm looking for is that my circle moves to the bottom when I click it using the keyframes (I will have more of them in the future).</p>
  
  <p>After the first click the circle should stay at the bottom, this is happening already with the code above.</p>
  
  <p>However, when I reclick the circle, I want it to do the same animation in reverse and return to the original position. Also allowing me to reclick it after to move it back down using the same animation... This is currently not working. It moves down and the jumps to the top and the bottom without the animation.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><a href="https://codepen.io/anon/pen/vJoKjr" rel="nofollow noreferrer">Here be my example</a></p>