2

css3 @keyframe アニメーションを制御するのに少し問題があります。

これは 2 つの部分からなるアニメーションです。平らに置かれている背の高い長方形があります。最初の部分では、90 度回転し、z 軸を手前に移動しながら左に移動してから、反転を終了するので、さらに 90 度回転して続行します。左に移動し、z 軸に戻ります。したがって、基本的には円弧をアニメートしながら反転します。

私には3つの問題があります.1つはロード時にアニメーションが再生されますが、これは望ましくありません.ホバー時にのみ再生したい.2つは終了するとすぐにリセットされます.マウスが離れると、スムーズに再生されるはずの途中でアニメーションが一瞬一時停止します。

私はここでそれをいじっています。これについて助けてくれてありがとう!: 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