css3 @keyframes animation hover

Question

I have a css3 @keyframe animation that I'm having a little trouble controlling.

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.

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.

I have a fiddle of it here, thanks for any help on this!: http://jsfiddle.net/3qEPA/9/

Also here is the css:

.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;
}

Solution

The reason for why the animation starts on page load is because it’s triggered (webkit browsers) here:

.view .s5 {
/* I’ve left out the other code just to make it clear */
   -webkit-animation: fold_1 600ms ease-in-out;
}

If you don’t want the animation to reset once it’s finished, you'll need to add

 animation-fill-mode: forwards;

which will persist the end state. But, since you want the animation to run backwards ones you hover out I actually think you’ll need to look into transitions instead. I made some quick changes in your code, just to show how it can be done.

This is a quick fix but I think it at least works as you want it to(?).

Instead of calling the keyframe rule, we’ll transition the transform on hover instead. Something like this …

.view:hover .s5 {
   -webkit-transition: all 150ms ease-in-out;
           transition: all 150ms ease-in-out;
    -webkit-transform: translate3d(-180px, 0, 0) rotate3d(0, 1, 0, -180deg);
            transform: translate3d(-180px, 0, 0) rotate3d(0, 1, 0, -180deg);
}

And then we’ll add (which you already had) a transition to the .view .s5 {} as well, which will make a smooth transition backwards.

.view .s5 {
/* I’ve left out the other code just to make it clear */
  -webkit-transition: 150ms ease-in-out;
     -moz-transition: 150ms ease-in-out;
       -o-transition: 150ms ease-in-out;
      -ms-transition: 150ms ease-in-out;
         transition:  150ms ease-in-out;
}

And here's a working DEMO

Hope this helped!