Gif-Animation läuft nur einmal ab

[manwiegeht]

Hallo,
habe eine gif-Animation die ich auf einen Button lege. Habe eine index.html und eine index.css. Wenn ich die Seite lade und mit dem Mauscursor über den Button fahre läuft die gif-Animation ab (geht so zwei Sekunden). Problem. Wenn ich wieder über den Button fahre soll die gif-Animation ein zweites und ein drittes Mal ablaufen. Tut sie aber nicht. Wenn ich erneut über den Button fahre ist immer nur das Ende der Animation zu sehen. Sie wird einfach nicht neu geladen. Was mache ich falsch?

So sieht die index.css aus.
#main_section
{
margin:100px;
padding:100px;
background-color:rgb(2, 2, 25);
}

#content
{
margin-left:20px;
margin-right:20px;
background-color:rgb(255, 255, 255);
}

#navbereich
{
position:absolute;
top:60px;
left:200px;
width:242px;
height:400;
background-color:white;
}

a.animation_link
{
display:block;
position:absolute;
width:220px;
height:55px;
line-height:56px;
font-size:20px;
font-family:Tahoma, sans-serif;
text-align:center;
text-decoration:none;
letter-spacing:0.1em;
padding:4px;
}

a.animation_link:link, a.animation_link:visited
{
color:black;
line-height:40px;
background-repeat:no-repeat;
}

a.animation_link:hover, a.animation_link:active
{
color:white;
line-height:40px;
background-image:url(animation.gif);
}

a#animation
{
top:240px;
left:10px;
}

 

[Sempervivum]

Hallo und willkommen im Forum!
Ich dachte zunächst, ein Zurücksetzen von background-image mit CSS würde das Problem lösen aber das hat sich nicht bestätigt. Auch den Leuten auf Stackoverflow fällt nichts anderes ein als ein Neuladen des Bildes mit Javascript zu erzwingen:
https://stackoverflow.com/questions/7568855/restart-animated-gif-as-background-image
Versuche dieses Javascript:

    <script>
        const
            aniLink = document.querySelector('a.animation_link');
        function startAni() {
            aniLink.style.backgroundImage = `url(images/Weihnachtsmann-3times.gif?t=${Date.now()})`;
        }
        function stopAni() {
            aniLink.style.backgroundImage = `none`;
        }
        aniLink.addEventListener('mouseover', startAni);
        aniLink.addEventListener('mouseleave', stopAni);
    </script>
</body>

</html>

Wie Du siehst, am Ende des Body, vor dem schließenden </body>.
Die URL des Bilder musst Du natürlich ändern. Das Anhängsel ?t=${Date.now()muss dabei jedoch erhalten bleiben.

 

[manwiegeht]

Man genial. Daaaaaaaas ist es. Echt super. Vielen Dank. Man kann mich gar nicht beruhigen das es jetzt endlich geht. Habe mir einen wolf gesucht.

Vielen vielen Dank