css3 @keyframes 动画悬停

Question

我有一个 css3 @keyframe 动画，我在控制时遇到了一些麻烦。

这是一个分为两部分的动画，有一个平放的高矩形，在第一部分中它假设旋转 90 度并将 z 轴向上平移向您同时也向左平移，然后完成翻转，所以另一个 90度，继续向左移动并沿 z 轴向下移动。所以基本上是在制作弧形动画时翻转。

我有三个问题，一个是加载时播放动画，我不想这样，我只希望它在悬停时播放，第二个，一旦完成它会立即重置，但实际应该发生的是动画应该只需在鼠标离开时向后运行，当它应该顺利播放时，动画会暂停三秒。

我这里有一个 fiddle ，感谢您对此的任何帮助!: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

希望这对您有所帮助!