Javascript 每个鼠标上都有动画？

我已经创建了一个反弹动画。此反弹动画将显示在图像上，并在鼠标悬停时触发。目前，动画只出现一次，我想要的是，它应该在每个鼠标上方反弹

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>

CSS:

---

如果忘记重置类名，请尝试以下操作：

<script type="text/javascript">
    function bounce(a) {
        document.getElementById(a).className = "animated bounce_css";
        setTimeout(function(){
            document.getElementById(a).className = "hair_animate"; 
        },1000)
    }

</script>

功能反弹（a）{
document.getElementById（a）.className=“动画弹跳”css；
setTimeout（函数（）{
document.getElementById（a）.className=“hair\u animate”；
},1000)
}

你昨天发布了完全相同的问题，我说的对吗？没有。这是关于其他问题，这次动画完成了，但它只在我第一次鼠标悬停时发生。我尝试了css中的线性、无限等其他功能，但这与我想要的不匹配，即每个鼠标悬停时都会出现反弹，目前它只发生过一次？？你可以去看看我的活动日志。我在网上看到了一些教程，所有的都有一次。我不知道它是否可以在每一个鼠标上完成。如果无限是可能的，如果一次是可能的，那么每一个鼠标上的动画也应该是可能的…我在过去的两个小时里一直在做这个，但无法找到解决方案！！！那是什么？头发_animate@jayeshjain默认类：hair_animate“width=“13”height=“40”onmouseover=“bounce（this.id）；" >

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

<script type="text/javascript">
    function bounce(a) {
        document.getElementById(a).className = "animated bounce_css";
        setTimeout(function(){
            document.getElementById(a).className = "hair_animate"; 
        },1000)
    }

</script>