title: How do you reverse css keyframe animation in webkit?
body: <p>I have a control that I want to transition between two locations following a keyframe animation.  Is there a way to use the same keyframe but in reverse?  Also, is there a way to stop the animation, halfway and reverse it to the beginning?</p>
  
  <p>Here is what I have now (and I want to combine the two keyframes:</p>
  
  <pre><code>@-webkit-keyframes explode {
    0% {
  -webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
   }
   33% {
     -webkit-transform: scale(2.0)   translate(100px, -150px);
   }
   67% {
     -webkit-transform: scale(2.0)   translate(200px, -250px);
   }
   100% {
     -webkit-transform: scale(1.0)  translate(-15px, -15px);
   }
  }
  
  @-webkit-keyframes explodeBack {
   0% {
    -webkit-transform: scale(1.0)  translate(-15px, -15px);
   }
   67% {
     -webkit-transform: scale(2.0)   translate(100px, -150px);
  
   }
   100% {
     -webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
  
   }
  }
  
  .leftArrowAnimateForward{
       -webkit-animation-name: explode;
       -webkit-animation-duration: 3s;
       -webkit-animation-timing-function: linear;
       -webkit-animation-direction:normal; /* Safari and Chrome */
        -webkit-transform: scale(1.0)  translate(-15px, -15px);
  }
  
  .leftArrowAnimateBackward{
       -webkit-animation-name: explodeBack;
       -webkit-animation-duration: 3s;
       -webkit-animation-timing-function: linear;
       -webkit-animation-direction:alternate; 
        -webkit-transform: scale(1.0)  translate(0px, 0px);
  }
  </code></pre>