javascript - マウスオーバーごとにアニメーション？

Question

バウンスアニメーションを作成しました。このバウンス アニメーションは画像に対するもので、マウスオーバーでトリガーされます。現在、アニメーションは一度だけ発生します。私が望むのは、マウスオーバーごとに跳ね返ることです。

HTML コード:

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

ジャバスクリプト:

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