title: css3 @keyframes animation hover
body: <p>I have a css3 @keyframe animation that I'm having a little trouble controlling.</p>
  
  <p>It's a two part animation, there is a tall rectangle that is laying flat, in the first part it's suppose to rotate 90 degrees and translate up the z axis towards you while also translating left, then finish the flip, so another 90 degrees, continue moving left and back down the z-axis.  So basically flip while animating an arc.</p>
  
  <p>I have three problems, one the animation plays on load, which I don't want, I only want it to play on hover, and two, once it finishes it immediately resets, but what should actually happen is the animation should just run backwards on the mouse leaving, and three the animation pauses for a split second half way through when it should play through smoothly.</p>
  
  <p>I have a fiddle of it here, thanks for any help on this!: <a href="http://jsfiddle.net/3qEPA/9/" rel="nofollow">http://jsfiddle.net/3qEPA/9/</a></p>
  
  <p>Also here is the css:</p>
  
  <pre><code>.view {
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      -o-perspective: 800px;
      -ms-perspective: 800px;
      perspective: 800px;
      border:1px solid red;
      position:relative;
      width:300px;
      height:261px;
      -webkit-box-shadow: inset 0px 0px 8px 1px rgba(1, 1, 1, .6);
      box-shadow: inset 0px 0px 8px 1px rgba(1, 1, 1, .6);
      background:-webkit-linear-gradient(left, #3a3a3a 0%, #666666 36%);
  }
  .slice {
      height:100%;
      float:left;
      width:60px;
      height:100%;
      background:#bf193b;
      -webkit-backface-visibility:visable;
  }
  .s5 {
      position:absolute;
      left:240px;
      z-index:2;
  }
  @-webkit-keyframes fold_1 {
      0% {
          -webkit-transform: translate3d(0px, 0, 0) rotate3d(0, 0, 0, 0deg);
      }
      50% {
          -webkit-transform: translate3d(-90px, 0, 50px) rotate3d(0, 1, 0, -90deg);
      }
      100% {
          -webkit-transform: translate3d(-180px, 0, 0) rotate3d(0, 1, 0, -180deg);
      }
  }
  .view:hover .s5 {
      -webkit-animation:fold_1 900ms ease-in-out;
  }
  .view .s5 {
      width: 60px;
      height: 100%;
      z-index: 100;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: fold_1 600ms ease-in-out;
      -moz-transition: -moz-transform 150ms ease-in-out;
      -o-transition: -o-transform 150ms ease-in-out;
      -ms-transition: -ms-transform 150ms ease-in-out;
      transition: transform 150ms ease-in-out;
  }
  </code></pre>