css3 @keyframes动画悬停

Question

我有一个css3 @keyframe动画，我有点麻烦控制。

这是一个两部分动画，有一个高大的矩形放置平坦，在第一部分中，它假设旋转90度并将z轴朝您翻译，同时也翻译左边，然后完成翻转，所以另一个90度，继续向左和向后移动z轴。所以基本上在动画弧线的同时进行翻转。

我有三个问题，一个是动画在负载上播放，我不想要，我只想让它在悬停时播放，而另外两个，一旦它完成立即重置，但实际上应该发生的动画是动画应该只是在鼠标离开时向后运行，而三个动画在下半部分应该顺利播放时暂停。

我对它有小提琴这里，感谢有这方面的帮助！：http://jsfiddle.net/3qEPA/9/

而且，这里是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; 
} 

Answer 1

原因为何动画开始在页面加载是因为它的触发（WebKit浏览器）在这里：

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

如果你不希望动画一旦它完成重置，你需要添加

animation-fill-mode: forwards; 

这将坚持最终状态。但是，既然你想让动画向后移动，那么我认为你需要考虑转换。我在代码中做了一些快速的改变，只是为了展示如何完成。

这是一个快速修复，但我认为它至少可以按照你想要的那样工作（？）。

我们不是调用关键帧规则，而是转换悬停时的转换。 事情是这样的......

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

然后我们将添加（你已经有了）到.view .s5 {}过渡为好，这将平稳过渡倒退。

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

而这里的工作DEMO

希望这有助于！