title: CSS transition going backwards/reverse
body: <p>I'm wondering if is there any way to use the same CSS transition instance to both move it forward and then backwards/reverse. For example, lets say I have this transition:</p>
  
  <pre><code>@-webkit-keyframes fade-transition {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  </code></pre>
  
  <p>And two runners for this transition. One does the fade in and the other does the fade out:</p>
  
  <pre><code>.fade-in {
      -webkit-animation: fade-transition .2s linear backwards;
  }
  
  .fade-out {
      -webkit-animation: fade-transition .2s linear forwards;
  }
  </code></pre>
  
  <p>What I want to accomplish is to use the same transition to do both the fade in and the fade out but the way I'm doing it doesn't work.</p>
  
  <p><a href="http://jsbin.com/aduwif/5/" rel="nofollow">Here is the example on JSBin</a>.</p>