I'm facing an issue with an animated gif that plays spinning gears for 1 second and then stops. I have a static image that loads first, which is replaced by the gif when it is clicked to make the gears spin. While this functionality works as intended on the first click, the gif animation fails to play on the second click unless the page is refreshed. However, refreshing the entire page is not an ideal solution for me since the animated gif is used to display a div below the gears when clicked. The gif is set as a background image. Is there a way to simply reload or refresh the gif background image/gif upon clicking?
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
#gear-box{
height: 80px;
width: 50px;
cursor: pointer;
}
.turngears{
width: 80px;
height: 50px;
background: url('image/GearsBaseStatic.png') no-repeat;
}
.spingears{
width: 80px;
height: 50px;
background: url('image/GearsBase.gif') no-repeat;
background-size:74px 45px;
}
</style>
<body>
<div id="gear-box">
<div id="gears" class="turngears">
</div>
</div>
<div>
<script>
var gear = document.getElementById('gears');
gear.addEventListener('click',function(gear){
gear.target.classList.toggle('spingears')
})
</script>
</body>
</html>