1

ホバー時にアニメーション化するテキストを含む単純な DIV があります。唯一の問題は、ユーザーがもう一度カーソルを合わせると、ページがリロードされるまで何もしないということです。

ユーザーが更新しなくても、ホバーするたびにアニメーション化できるようにすることはできますか?

CSS

.animated2:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}   
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
0% {-moz-transform: scale(1);}  
10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
0% {-o-transform: scale(1);}    
10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
100% {-o-transform: scale(1) rotate(0);}
 }

@keyframes tada {
0% {transform: scale(1);}   
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}

.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}
4

1 に答える 1

1

Javascript を少し使用するだけで、目的を達成できます。

ホバー時にアニメーション クラス (tada) を、アニメーションを配置する div に追加できます。もちろん、マウス カーソルを移動するときは、アニメーション クラス (tada) を削除する必要があります。

私は回転を試したことはありませんが、Javascript なしでスケールを機能させることもできます。

例えば：

.animated2 {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.animated2:hover {  
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05); 
}

カーソルを div に移動するたびに、スケールで機能するはずです。

乾杯。

于 2014-06-13T18:55:46.200 に答える