Wie kann ich mit reinem CSS die Pausen- und Wiedergabeeffekte von CSS-Animationen erzielen? Einführung in die Animation-Play-State-Eigenschaft (ausführliche Erklärung)

CSS-Animationen mit reinen CSS-Methoden anhalten oder abspielen. Scheint es unmöglich zu sein, dies zu erreichen, oder ist es eine sehr mühsame Implementierungsmethode, für deren Umsetzung viele CSS-Stile erforderlich sind? Tatsächlich ist dies nicht der Fall. In CSS3-Animationen gibt es eine solche Eigenschaft, die Animationen anhalten und abspielen kann. In diesem Kapitel erfahren Sie, wie Sie mit reinem CSS die Pausen- und Wiedergabeeffekte von CSS-Animationen erzielen. Einführung in die Animation-Play-State-Eigenschaft (ausführliche Erklärung) . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

animation-play-state-Attribut

 animation-play-state: paused | running;

animation-play-state: Das Attribut definiert, ob eine Animation ausgeführt oder angehalten wird. Sie können es abfragen, um festzustellen, ob die Animation ausgeführt wird. Darüber hinaus kann der Wert so eingestellt werden, dass die Wiedergabe der Animation angehalten und fortgesetzt wird.

Mit Hilfe von Javascript können wir die Ausführung und Wiedergabe von CSS-Animationen steuern. Nachfolgend sind einige Schlüsselcodes aufgeführt:

HTML-Code:

<div class="btn">stop</div> 
<div class="animation"></div>

CSS-Code:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

js-Code:

document.querySelector('.btn').addEventListener('click', function() {
    let btn = document.querySelector('.btn');
    let elem = document.querySelector('.animation');
    let state = elem.style['animationPlayState'];
    
    if(state === 'paused') {
        elem.style['animationPlayState'] = 'running';
        btn.innerText = 'stop';
    } else {
        elem.style['animationPlayState'] = 'paused';
        btn.innerText = 'play';
    }
    
});

Rendering (während der Wiedergabe und nach dem Stoppen der Wiedergabe):

Reine CSS-Implementierung

Lassen Sie uns untersuchen, ob dies mit reinem CSS erreicht werden kann.

Implementierung der Hover-Pseudoklasse

Verwenden Sie die Hover-Pseudoklasse, um die Pause des Animationsstils zu steuern, wenn sich die Maus über der Schaltfläche befindet.

Die Schlüsselcodes lauten wie folgt:

HTML-Code:

<div class="btn stop">stop</div> 
<div class="animation"></div>

CSS-Code:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

Rendering:

Natürlich ist diese Methode nicht intelligent genug. Wenn Sie die Freiheit der Maus loslassen, klicken Sie einmal, um zu pausieren, und klicken Sie dann erneut, um abzuspielen. Gibt es andere Methoden?

Überprüfte Pseudoklassenimplementierung

Der vorherige Artikel „Interessantes CSS-Thema (8): Reine CSS-Navigationsleisten-Tab-Umschaltlösung“ ist auch As erwähnt, unter Verwendung der geprüften Pseudoklasse des Radio-Tags sowie der Implementierung von reinem CSS zur Erfassung von Klickereignissen.

Und Sie können einige CSS-Stile mithilfe des angeklickten Elements steuern. Die Implementierung ist wie folgt:

HTML-Code:

<input id="stop" type="radio" name="playAnimation"/>
<input id="play" type="radio" name="playAnimation"/>

<div class="box">
    <label for="stop">
        <div class="btn">stop</div>
    </label>
    <label for="play">
        <div class="btn">play</div>
    </label>
</div>

<div class="animation"></div>

CSS-Code:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#stop:checked ~ .animation {
    animation-play-state: paused;
}

#play:checked ~ .animation {
    animation-play-state: running;
}

Wir hoffen, dass die beiden Radios #stoppen und #spielen Wenn darauf geklickt wird, weisen Sie dem .animation-Element „animation-play-state: paused“ bzw. „animation-play-state: running“ zu. Da nur einer der beiden wirksam werden kann, muss den beiden Radio-Tags das gleiche Namensattribut zugewiesen werden.

Rendering:

Im obigen Beispiel wird reines CSS verwendet, um die CSS-Animation anzuhalten und abzuspielen.

Natürlich gibt es auch andere Methoden, z. B. das Ersetzen von Radio durch ein Kontrollkästchen oder die Verwendung des :target-Pseudoklassenselektors, um den gleichen Effekt wie oben zu erzielen. Wenn Sie interessiert sind, können Sie es ausprobieren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit reinem CSS die Pausen- und Wiedergabeeffekte von CSS-Animationen erzielen? Einführung in die Animation-Play-State-Eigenschaft (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!