CSS: The Definitive Guide, 5. Auflage

Kapitel 19. Animation

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

CSS Übergänge, die im vorherigen Kapitel behandelt wurden, ermöglichen einfache Animationen, die durch Änderungen im DOM-Zustand ausgelöst werden und von einem Anfangszustand zu einem Endzustand führen. CSS-Animationen ähneln den Übergängen insofern, als sich die Werte von CSS-Eigenschaften im Laufe der Zeit ändern, aber Animationen bieten viel mehr Kontrolle über die Art und Weise, wie diese Änderungen stattfinden. Mit CSS-Keyframe-Animationen können wir entscheiden, ob und wie eine Animation wiederholt wird, wir können genau steuern, was während der Animation passiert und vieles mehr. Während Übergänge implizite Eigenschaftswertänderungen auslösen, werden Animationen explizit ausgeführt, wenn Keyframe-Animationen angewendet werden.

Mit CSS-Animationen kannst du Eigenschaftswerte ändern, die nicht Teil des festgelegten Vor- oder Nachzustandes eines Elements sind. Die Eigenschaftswerte, die für das animierte Element festgelegt werden, müssen nicht unbedingt Teil des Animationsverlaufs sein. Wenn du zum Beispiel einen Übergang von Schwarz zu Weiß verwendest, werden nur die verschiedenen Grautöne animiert. Bei der Animation muss das gleiche Element während der Animation weder schwarz noch weiß sein und auch nicht zwischen den Grautönen liegen.

Du kannst zwar durch Grautöne gehen, aber du könntest das Element auch gelb machen ...