ボタンで mouseenter を使用する場合、CSS3 アニメーションのスケール コマンドを別の要素でトリガーする必要があります。
私のコードは現在これを行っていますが、マウスを削除するまでスケールを終了点にとどめる必要があります。その後、スケールされた要素を元の寸法に戻す必要があります。
どうすればいいですか?
これが私のコードです:
$("#button").mouseenter(function() {
$('.transform').toggleClass('classname');
});
CSS:
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.classname {
-webkit-animation: cssAnimation 1.000s 1 ease;
-moz-animation: cssAnimation 1.000s 1 ease;
-o-animation: cssAnimation 1.000s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: scale(1.000) }
to { -webkit-transform: scale(0.800) }
}
ありがとうございました。