Wie kann ich eine CSS3-Animation im letzten Frame stoppen?

CSS3-Animation beim letzten Frame anhalten

Bei der Arbeit mit CSS3-Animationen kann es wünschenswert sein, die Animation am Ende dauerhaft einzufrieren sein letzter Rahmen. Dies kann besonders nützlich für Animationen sein, die Elemente außerhalb des Bildschirms verschieben.

Eine Methode, dies zu erreichen, ist die Verwendung der Eigenschaft „animation-fill-mode“. Bei der Einstellung „Vorwärts“ wird sichergestellt, dass das Element auch nach Abschluss des Animationszyklus das Erscheinungsbild seines letzten animierten Frames beibehält.

Zum Beispiel in der angegebenen Animation mit Keyframes mit dem Namen „Farbwechsel“:

@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); }
}

Um die Animation dauerhaft am letzten Frame zu stoppen, fügen Sie den Animationsfüllmodus hinzu: vorwärts; zum animierten Element:

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

Dadurch wird sichergestellt, dass das Element nach Abschluss der Animation auf 0,5 skaliert, um 5 Grad gedreht und in die im 100 %-Keyframe angegebene Endposition verschoben bleibt.

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