私はカーソルを合わせたときに 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;
}
これは、ホバーしたときにバウンスアウトアニメーションを正常に適用しますが、mouseleave で div を 0 にフェードバックさせる方法がわかりません。-webkit-transition: opacity 1s;
どこかに助けを追加しますか?
可能であれば、cssのみ/js/jquery以外のソリューションをお勧めします。