its frontendfriday animationen mit webkit 671

Es ist Freitag, also #FrontendFriday :

Ein anderer findet oder eine Animation auf einer Homepage.

In einer Animation können Sie die CSS-Eigenschaften so ändern, wie Sie es wünschen und wie Sie es wünschen.

Um die CSS-Webkit-Animationen nutzen zu können, müssen Sie einige Keyframes angeben.

Die @keyframes Regeln

Bei Keyframes geht es darum, zu bestimmen, wann und wie sich das Element verhalten soll.

its frontendfriday animationen mit webkit 78

Füllmodus für einen Cartoon

CSS-Animationen haben keinen Einfluss auf ein Element, das vor dem Keyframe oder nach dem letzten Keyframe abgespielt wird. Dieses Verhalten kann von der Eigenschaft überschrieben werden.

Die Eigenschaft animation-fill-mode legt einen Stil für das Zielelement fest, sobald die Animation nicht abgespielt wird (bevor sie beginnt, nachdem sie endet oder beides).

  • None – Standardwert. Es gibt keine Styles für die Animation auf dem Teil vor oder nach der Ausführung.
  • Vorwärts – Die Komponente behält die Stilwerte des letzten Keyframes bei (abhängig von der Cartoon-Richtung und der Anzahl der Animationsiterationen).
  • Rückwärts – Das Element findet die vom ersten Keyframe festgelegten Style-Werte (basierend auf der Cartoon-Richtung) und bewahrt sie während der Animationsverzögerungszeit.
  • Ebenso – Der Cartoon folgt den Regeln für die Vorwärts- und Rückwärtsbewegung und erweitert die Eigenschaften des Cartoons in beide Richtungen.

Animationen werden häufig in Verbindung mit JavaScript verwendet, z.B. durch Anklicken, um ein Bild zu animieren.

Hast du jemals Cartoons auf einer Seite gesehen, auf der du glaubst, dass du die Animation speichern kannst?