2

我有一个 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;
}
4

1 回答 1

4

动画在页面加载时开始的原因是因为它在此处触发（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);
}

然后我们将添加（您已经拥有的）过渡到 the .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;
}

这是一个有效的演示

希望这有帮助！

于 2013-08-22T10:15:06.807 回答