So behalten Sie den Endstatus der CSS3-Animation bei

Einführung

CSS3-Animationen verleihen dem Webdesign reichhaltige dynamische Effekte und machen die Seite lebendiger und attraktiver. Manchmal möchten wir jedoch, dass die Animation am Ende in ihrem Endzustand bleibt, anstatt in ihren Anfangszustand zurückzukehren. In diesem Artikel werden verschiedene Möglichkeiten vorgestellt, um diesen Effekt zu erzielen und sicherzustellen, dass die Animation in diesem Zustand bleibt, wenn die Aktion endet.

Methode 1: Verwenden Sie animation-fill-mode

Die Eigenschaft animation-fill-mode wird verwendet, um den Animationsstil vor und nach der Wiedergabe zu steuern. Durch Festlegen dieser Eigenschaft können Sie den Endzustand beibehalten, wenn die Animation endet.

Attributwert

Beispiel

 .element {
  Animation: myAnimation 2s Easy-In-Out;
  Animationsfüllmodus: vorwärts;
}
@keyframes myAnimation {
  0 % {
    transform: TranslateX(0);
  }
  100 % {
    transform: TranslateX(100px);
  }
}

In diesem Beispiel bleibt das .element Element nach dem Ende der Animation im Status transform: translateX(100px) .

Methode 2: animationend Ereignis verwenden

Indem Sie das animationend -Ereignis über JavaScript abhören, können Sie den Stil des Elements manuell festlegen, wenn die Animation endet, um den Endstatus der Animation beizubehalten.

Beispiel

 <div class="element"></div>

 .element {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Animation: myAnimation 2s Easy-In-Out;
}
@keyframes myAnimation {
  0 % {
    transform: TranslateX(0);
  }
  100 % {
    transform: TranslateX(100px);
  }
}

 const element = document.querySelector('.element');
element.addEventListener('animationend', () => {
  element.style.transform = 'translateX(100px)';
});

Wenn in diesem Beispiel die Animation endet, setzt der JavaScript-Code die transform des Elements auf translateX(100px) und behält so den Endzustand der Animation bei.

Methode 3: Verwenden Sie das transition

Obwohl die transition hauptsächlich für Übergangseffekte verwendet wird, können Sie durch geschickte Verwendung auch den Effekt erzielen, dass der Endzustand am Ende der Animation beibehalten wird.

Beispiel

 <div class="element"></div>

 .element {
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: rot;
  Übergang: Transformation 2s Easy-in-out;
}
.element.animate {
  transform: TranslateX(100px);
}

 const element = document.querySelector('.element');
element.classList.add('animate');

In diesem Beispiel wechselt die transform des Elements durch Hinzufügen der animate -Klasse von ihrem Anfangszustand zu translateX(100px) und verbleibt in diesem Zustand, nachdem der Übergang beendet ist.

Zusammenfassen

Das Beibehalten des Endzustands einer CSS3-Animation kann auf verschiedene Arten erreicht werden, einschließlich der Verwendung animation-fill-mode , des Abhörens animationend und der Verwendung der Eigenschaft transition . Jede Methode hat ihre anwendbaren Szenarien, und Entwickler können die geeignete Methode entsprechend den spezifischen Anforderungen auswählen.

Ich hoffe, dieser Artikel kann Ihnen ein klares Verständnis und praktische Anleitungen vermitteln, die Ihnen dabei helfen, CSS3-Animationen besser in der tatsächlichen Entwicklung anzuwenden und die erforderlichen dynamischen Effekte zu erzielen.

Damit ist dieser Artikel über die Beibehaltung des Endzustands der CSS3-Animation abgeschlossen. Weitere Informationen zur Beibehaltung des Endzustands der CSS3-Animation finden Sie in früheren Artikeln auf downcodes.com oder durchsuchen Sie weiter unten die entsprechenden Artikel Unterstützen Sie downcodes.com in Zukunft!