CODEWITHSUNDEEP
cssanimation
user1393984
user1393984

Reputation: 1329

Animation on hover only works the first time

I have a simple DIV with text in that animates on hover. The only problem is that it only does it once, if the user hovers over it again it does nothing until the page is reloaded.

Is there anything I can do so that it animates every time it's hovered over without the user having to refresh?

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;
}

Upvotes: 1

Views: 1619

Answers (1)

Caner Şahin
Caner Şahin

Reputation: 568

You can reach your goal with using a little bit Javascript.

You can add the animation class (tada) on hover to your div where you want to have the animation. Of course when you move out your mouse cursor you have to remove the animation class (tada).

I haven't tried the rotate but you can also make scale work without Javascript for sure.

For example:

.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); 
}

Should work for scale everytime you move your cursor on a div.

Cheers.

Upvotes: 1

Related Questions