2

私はカーソルを合わせたときに div をバウンスさせようとしている CSS アニメーションを使用しています (からopacity: 0;1 に変更)。ただし、マウスがホバーすると、不透明度が元の値の0に戻ります。これまでのところ、次のとおりです。

@-webkit-keyframes bouncey {
    0% {
        opacity:0;
        -webkit-transform: scale(1);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

.box {
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0;  
}
.box:hover {
    opacity: 1;
    -webkit-animation: bouncey 1s ease-in-out;
}

http://jsfiddle.net/Xhuuq/

これは、ホバーしたときにバウンスアウトアニメーションを正常に適用しますが、mouseleave で div を 0 にフェードバックさせる方法がわかりません。-webkit-transition: opacity 1s;どこかに助けを追加しますか？

可能であれば、cssのみ/js/jquery以外のソリューションをお勧めします。

4

2 に答える 2

2

animationバウンスtransitionを処理してから、不透明度の変更を処理するために使用できます。

http://jsfiddle.net/BYossarian/Xhuuq/9/

@-webkit-keyframes bouncey {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

.box {
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
}
.box:hover {
    opacity: 1;
    -webkit-animation: bouncey 1s ease-in-out;
}
于 2013-10-06T22:13:33.317 に答える
1

http://jsfiddle.net/Xhuuq/7/

.box{
    -webkit-transition: opacity 0.5s ease-in-out;
}

.box:hover {
    -webkit-transition: none;
}

トランジションはブラーでのみ発生します

お役に立てれば ：）

于 2013-10-06T22:07:54.357 に答える