Gibt es „nur CSS“-Möglichkeiten für den Übergang in und aus einer Animationsschleife?

koltyn · 20. Juli 2023

Ich habe eine „Umgebungs“-Transformationsanimation, die auf einem Element ausgeführt wird, wenn nicht mit ihm interagiert wird. Beim Bewegen des Mauszeigers möchte ich die Animation anhalten und in ihre Transformation übergehen, und beim Nichtbewegen des Mauszeigers in den Zustand zurückkehren, in dem sie angehalten wurde, und die Animationswiedergabe fortsetzen.

VidMate - Download VidMate App Free Install for Android 2022

VidMate app supports over 200 platforms to download movies and videos. Free download the best YouTube downloader for Android! Download VidMate

vidmate.onl

Ich habe vor kurzem angefangen, ein paar Web-Entwicklungsaufgaben zu erledigen, und bin ehrlich gesagt ein bisschen überwältigt davon, wie leistungsfähig CSS ist. Ich weiß, dass dies (zu meiner Frage) mit etwas JS ziemlich einfach ist, wollte aber wissen, ob es ein sauberes Muster/eine saubere Methode gibt, um es nur über CSS anzugehen.

Sempervivum · 20. Juli 2023

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:

HTML

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

HTML

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

Gibt es „nur CSS“-Möglichkeiten für den Übergang in und aus einer Animationsschleife?

Jetzt mitmachen!

Teilen