title: CSS Reverse animation not working
body: <p>I am trying to reverse an animation but the class is being added but the animation does not occur. Is there something wrong with my code? Or am i missing an important animation principle?</p>
  
  <p>As of now, there are animation classes that take care of the forward and reverse animation, but I need to be able to reverse the animations instead of creating a new animation to bring the elements back to the original state.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;div class="posrel"&gt;
      &lt;h1 class="white heading-abs"&gt;Heading&lt;/h1&gt;
      &lt;div class="redbg round divabs"&gt;&lt;/div&gt;
      &lt;button role="button" class="clickButton white customfont"&gt;Click&lt;/button&gt;
      &lt;button role="button" class="originalState white customfont"&gt;Original State&lt;/button&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <p>body
      {
          background: black;
          font-family: 'Ubuntu Mono';
      }</p>
  
  <pre><code>.posrel
  {
      position: relative;
      width: 500px;
      height: 500px;
  }
  
  .white
  {
      color: white;
  }
  
  .heading-abs
  {
      position: absolute;
      left: 30%;
      top: 5%;
  }
  
  .round
  {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      -webkit-transform: scale(1.0);
  }
  
  .clickButton
  {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      border: none;
  }
  
  .redbg
  {
      background-color: red;
  }
  
  .divabs
  {
      position: absolute;
      top: 30%;
      left: 100%;
      cursor: pointer;
  }
  
  .scalebubbleani
  {
      -webkit-animation: scalebubbleanim 0.5s forwards ease-in-out;
  }
  
  @-webkit-keyframes scalebubbleanim
  {
      0%
      {
          -webkit-transform: scale(1.0);
      }
  
      100%
      {
          -webkit-transform: scale(0.2);
      }
  }
  
  *:focus
  {
      outline: none;
  }
  
  .moveheadingani
  {
      -webkit-animation: moveheadinganim 0.5s forwards ease-in-out;
  }
  
  @-webkit-keyframes moveheadinganim
  {
      0%
      {
          position: absolute;
          top: 5%;
          left: 30%;
      }
  
      100%
      {
          position: absolute;
          left: 110%;
          top: 25%;
      }
  }
  
  .customfont
  {
      font-family: 'Ubuntu Mono';
  }
  
  .originalState
  {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: rgba(255, 145, 0, 0.66);
      border: none;
      position: absolute;
      top: 15%;
      left: 0%;
  }
  
  .moveheadingbackani
  {
      -webkit-animation: moveheadingbackanim 0.5s forwards ease-in-out;
  }
  
  @-webkit-keyframes moveheadingbackanim
  {
      0%
      {
          position: absolute;
          left: 110%;
          top: 25%;
      }
  
      100%
      {
          position: absolute;
          top: 5%;
          left: 30%;  
      }
  }
  
  .scalebubbleoriginalani
  {
      -webkit-animation: scalebubbleoriginalanim 0.5s forwards ease-in-out;
  }
  
  @-webkit-keyframes scalebubbleoriginalanim
  {
      0%
      {
          -webkit-transform: scale(0.2);
      }
  
      100%
      {
          -webkit-transform: scale(1.0);
      }
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    $(document).ready(function(){
  
      $('.clickButton').click(function(){
          $('.round').addClass('scalebubbleani');
          $('.heading-abs').addClass('moveheadingani');
          $('.round').removeClass('scalebubbleoriginalani');
          $('.heading-abs').removeClass('moveheadingbackani');
      });
  
      $('.originalState').click(function(){
          $('.heading-abs').addClass('moveheadingbackani');
          $('.round').addClass('scalebubbleoriginalani');
          $('.round').removeClass('scalebubbleani');
          $('.heading-abs').removeClass('moveheadingani');
      });
  });
  </code></pre>
  
  <p>Having to reverse an animation would make my CSS code simpler and concise.</p>
  
  <p>Jsfiddle - <a href="http://jsfiddle.net/qyya3521/" rel="nofollow">http://jsfiddle.net/qyya3521/</a> </p>