Interessante Frage. Du beschreibst das relativ abstrakt, ich habe das mal mit einem einfachen Beispiel untersucht. Grundsätzlich kann man mit animation-play-state eine Animation pausieren. Versuche ich jedoch dann, über hover eine andere Transformation anzuwenden, funktioniert das nicht zuverlässig:
<!doctype html>
<html>
<head>
<title>Pause Animation</title>
<style>
#rot {
width: 100px;
height: 100px;
background-color: lightblue;
animation: ani 20s linear infinite;
}
@keyframes ani {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#rot:hover {
animation-play-state: paused;
transform: scale(1.5) rotate(45deg) !important;
}
</style>
</head>
<body>
<div id="rot"></div>
</body>
</html>
Alles anzeigen
Meine nächste Idee war, die Transformation im hover-Status auf einen Wrapper anzuwenden. Das funktioniert:
<!doctype html>
<html>
<head>
<title>Pause Animation</title>
<style>
#wrapper {
display: inline-block;
}
#rot {
width: 100px;
height: 100px;
background-color: lightblue;
animation: ani 20s linear infinite;
pointer-events: none;
}
@keyframes ani {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Beim Hover wenden wir eine Transformation
auf den Wrapper an */
#wrapper:hover {
transform: scale(1.5) rotate(45deg);
}
/* Beim Hover halten wir die Animation von #rot an */
#wrapper:hover #rot {
animation-play-state: paused;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rot"></div>
</div>
</body>
</html>
Alles anzeigen
Dabei kann man allerdings schon diskutieren ob das sauber ist oder Trickserei mit dem Wrapper.
Außerdem muss man Obacht geben, dass das Element durch die Transformation den hover-Status nicht wieder verliert, ist mir durch ein translate passiert.
Generell gehöre ich zu der Fraktion, die dagegen ist, auf Biegen und Brechen alles nur mit CSS zu realisieren. Besser die Webanimation-API verwenden, dann hat man alles im Griff und kann es auf direktem Wege steuern.
