title: CSS Animation: how to trigger the reverse animation?
body: <p>I'm trying to create a simple reusable CSS class so I can have this animation everywhere.</p>
  
  <p>Everything works fine except that I can't find any example/documentation on how to trigger the reverse animation.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="cards"&gt;
          &lt;div class="card"&gt;
              &lt;div class="frontpage"&gt;
                  &lt;img src="http://lorempixel.com/400/200/"/&gt;
              &lt;/div&gt;
              &lt;div class="rearpage"&gt;
                  &lt;img src="http://lorempixel.com/g/400/200/"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="card"&gt;
              &lt;div class="frontpage"&gt;
                  &lt;img src="http://lorempixel.com/400/200/"/&gt;
              &lt;/div&gt;
              &lt;div class="rearpage"&gt;
                  &lt;img src="http://lorempixel.com/g/400/200/"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My animation is a "card-flip"-like animation using a simple toggleClass in Javascript to trigger the animation:</p>
  
  <pre><code>$('.card').click(function(){
      $(this).toggleClass('opened');
  });
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>.cards {
      width: 800px;
      margin: auto;
  }
  
  .card {
      width: 200px;
      height: 100px;
      position: relative;
      display: inline-block;
      margin: 10px;
  }
  
  .card .frontpage, .card .rearpage {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
  }
  
  
  .card .rearpage {
      width: 0%;
  }
  
  .card .frontpage img, .card .rearpage img {
      width: 100%;
      height: 100%;
  }
  
  
  /***** ANIMATIONS *****/
  
  /* ANIMATION 1 */
  .card .frontpage {
      -webkit-animation-duration: 1s;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-fill-mode: forwards;
  }
  
  .card.opened .frontpage {
      -webkit-animation-name: frontToRear;
  }
  
  @-webkit-keyframes frontToRear {
      0% { width: 100%; }
      50% { width: 0%; margin-left: 50%; }
      100% { width: 0%; }
  }
  
  /* ANIMATION 2 */
  .card .rearpage {
      -webkit-animation-duration: 1s;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-fill-mode: forwards;
  }
  
  .card.opened .rearpage {
      -webkit-animation-name: rearToFront;
  }
  
  @-webkit-keyframes rearToFront {
      0% { width: 0%; }
      50% { width: 0%; margin-left: 50%; }
      100% { width: 100%; }
  }
  </code></pre>
  
  <p>What is the smart way of doing this? I wish I could just put some trigger on my <code>.rearcard</code> to trigger the reversed animation but I can't find any way of doing this. </p>
  
  <p>I know I could just write 2 other "reversed" animations and apply them but it seems so dumb that I can't try to do better.</p>
  
  <p>I set up a <a href="http://jsfiddle.net/9yp3U/" rel="nofollow">jsfiddle</a> to help you analyze and test out: <a href="http://jsfiddle.net/9yp3U/" rel="nofollow">http://jsfiddle.net/9yp3U/</a></p>