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;

将持续结束状态。但是，既然你希望动画向后运行，那么你实际上认为你需要调查转换。我对您的代码进行了一些快速更改，只是为了说明如何完成。

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

我们不是调用关键帧规则，而是转换hover上的转换。像这样......

.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

希望这有帮助！

css3 @keyframes动画悬停

1 个答案: