I've implemented a bounce animation that is triggered by mouseover on an image. Currently, the animation only happens once, but I want it to bounce every time the mouse hovers over it.
Here is the HTML code:
<div class="hair">
<img src="images/single.png" id="hair1" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);" >
<img src="images/single.png" id="hair2" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair3" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair4" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair5" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair6" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair7" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair8" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
<img src="images/single.png" id="hair9" class="hair_animate" width="13" height="40" onmouseover="bounce(this.id);">
</div>
JavaScript:
function bounce(a) {
document.getElementById(a).className = "animated bounce_css";
}
CSS:
.hair{
position: absolute;
top: 200px;
}
.animated {
-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-animation-iteration-count: infinite;*/
/*-webkit-animation-timing-function: linear;*/
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-60px);
}
60% {
-webkit-transform: translateY(-35px);
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-60px);
}
60% {
-moz-transform: translateY(-35px);
}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-o-transform: translateY(0);
}
40% {
-o-transform: translateY(-60px);
}
60% {
-o-transform: translateY(-35px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-60px);
}
60% {
transform: translateY(-35px);
}
}
.bounce_css {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}