Wie kann ich dafür sorgen, dass eine CSS3-Animation im letzten Frame bleibt?

Eine CSS3-Animation im letzten Frame stoppen

Um zu verhindern, dass ein animiertes Element nach Abschluss der Animation in seinen ursprünglichen Zustand zurückkehrt, können Sie Folgendes tun: Verwenden Sie die Eigenschaft „animation-fill-mode“. Diese Eigenschaft steuert das Verhalten des Elements nach dem Ende der Animation.

Lösung:

Um die Animation beim letzten Frame (100 %) zu stoppen, geben Sie den Wert an vorwärts für die Eigenschaft „animation-fill-mode“. Dadurch wird der Browser angewiesen, den Endzustand der Animation nach Abschluss beizubehalten.

Hier ist der aktualisierte CSS-Code mit dem Forward-Wert hinzugefügt:

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

Durch die Verwendung von „animation-fill-“ Modus: Vorwärts, das Element bleibt in seinem transformierten Zustand, nachdem die Animation beendet ist. Darüber hinaus können der optionale CSS-Übergang und der Animationsend-Keyframe verwendet werden, um das Element auszublenden oder zu entfernen, sobald die Animation abgeschlossen ist.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass eine CSS3-Animation im letzten Frame bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!