So stoppen Sie die CSS-Animation mittendrin und behalten die Haltung bei

Vorwort

Ich bin einmal auf ein schwieriges Problem gestoßen. Ich musste ein schwingendes Haus von einem Turmdrehkran fallen lassen, aber während des Fallvorgangs musste das Haus den Schwingwinkel im Moment des Fallens beibehalten. Das war damals sehr schwierig für mich. Zuerst hoffte ich, den aktuellen Schwingwinkel des Hauses zu ermitteln und ihn im Moment des Fallens der Funktion transform:rotate() des Hauses zuzuweisen, aber das war zu mühsam und wäre nicht die optimale Lösung gewesen.

Aber tatsächlich kann nur ein Attribut dieses Problem lösen.

Animation-Wiedergabe-Status

1. Nur CSS

Verwenden Sie diese Eigenschaft, um eine Animation in ihrem Bewegungszyklus anzuhalten und beim nächsten Start direkt mit dem aktuellen Frame zu beginnen. Dies ist eine Animationseigenschaft, die mit der Animationseigenschaft arbeitet. Sie können sie in CSS oder in JS verwenden und sie ist gleichermaßen praktisch, zumindest ... besser, als den Winkel abzurufen und zuzuweisen.

.xxx {
  Animations-Wiedergabestatus: angehalten;  
  //Sobald diese Eigenschaft hinzugefügt wurde, wird die CSS-Animation sofort angehalten und bleibt beim aktuellen Frame}

.xxx {
  Animations-Wiedergabestatus: läuft; 
  //Sobald diese Eigenschaft hinzugefügt ist, beginnt die CSS-Animation sofort ab dem aktuellen Frame.
}

Sie können einem Seitenelement eine Animation hinzufügen und festlegen, dass sie angezeigt wird, wenn es sich im Hover-Zustand befindet.

 Animationswiedergabestatus: pausiert

Die Animation wird gestoppt, wenn Sie mit der Maus über das Element fahren.

2. Verwenden Sie nur JS

//Wenn i gleich 1 ist, wird das Medium abgespielt und die Notizen schweben. Wenn i gleich 0 ist, wird das Medium angehalten und die Notizen werden angehalten.
            wenn (i == 1) {
                right.style.animationPlayState = "pausiert"
                audio.pause();
                ich = 0;
            } anders {
                right.style.animationPlayState = "läuft";
                audio.abspielen();
                ich = 1;
            } 

Dies ist das Ende dieses Artikels zum Stoppen und Aufrechterhalten von CSS-Animationen. Weitere Informationen zum Stoppen von CSS-Animationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!