Haupt-Reiter

U10: CSS3-Animation

Animationen auf Webseiten können seit der Veröffentlichung der CSS3 (Cascading Style Sheets Version 3) direkt mittels CSS definiert werden.

Umwege/Situation vor CSS3 Animationen

Vorher war es Web-Entwicklern nur über Umwege möglich Animationen auf Webseiten zu implementieren. Solche Umwege waren zum Beispiel

  • der Einsatz von Flash Animationen (von Adobe 2021 eingestellt und ab sofort in allen Browsern blockiert)
  • Scripte um einzelne Elemente auf den Webseiten zu manipulieren sodass diese Veränderungen zeitliche Animationen entstehen ließen, beispielsweise Script-Sprachen wie JavaScript
  • das Einbinden von Medieninhalten, die Animationen abbilden können, dies umfasst zum Beispiel GIF (Graphics Interchange Format) oder APNG (Animated Portable Network Graphics)

 

CSS3 Animationen

Animationen in CSS betreffen, wie auch die über CSS festgelegten Styles, immer ein spezifisch ausgewähltes (selektiertes) Element des HTML-DOMs.

Dabei definierst du die Animation getrennt von dem Element, welches du animieren möchtest. Dies macht es möglich, die gleiche Animation gleich auf mehrere Elemente anwenden zu können.

Die Arbeit mit CSS-Animationen gliedert sich demzufolge also in die folgenden zwei grundlegenden Bestandteile:

  1. Die Definition der CSS3 Animation
  2. Die Zuweisung der vorher definierten CSS3 Animation

 

Definition der Animation

Normale CSS Styles beschreiben das Aussehen eines beliebig selektierten HTML-Elementes immer "fix und statisch", also das Aussehen verändert sich nicht auf zeitlicher Ebene.

Die Webseite wird geladen, der Browser liest die CSS-Styles und wendet diese optisch auf die entsprechenden Elemente an, das wars.

Eine weitere Veränderung des Aussehens der Elemente erfolgt nicht (zumindest nicht durch CSS, mit JavaScript oder ähnlichen Script-Sprachen ist auch dies möglich.)

Damit aber nun genau das doch möglich ist durch CSS, lassen sich solche zeitlichen Abfolgen von Veränderungen des Aussehens der HTML-Elemente durch die besagten CSS Animationen erstellen.

Hierbei handelt es sich um übliche Style-Zuweisung, welche nun jedoch nicht einen fixen Zustand eines Elementes beschreiben, sondern eben mehrere Zustände.

Ein einzelner Zustand ist hierbei ein sogenannter Keyframe. Animationen entstehen nun, wenn mehrere dieser Keyframes definiert werden, durch die unterschiedlichen Styles, die jeweils im entsprechenden Keyframe festgelegt sind.

Wie auch bei CSS Media Queries gibt es hierzu in CSS eine sogenannte AT-Rule (at da mit dem @-Zeichen beginnende Deklaration), diese seiht so aus: 

@keyframes

Um nun eine vollständige Animation mit mehreren Keyframes aufzubauen muss zunächst einmal der Name der Animation festgelegt werden, dieser folgt der @-Regel und nach dem Namen schließen sich entsprechend die CSS üblichen geschweiften Klammer an, welche alle weiteren animationsspezifischen Deklarationen umschließen werden.

@keyframes example { … }

Die oben definierte CSS-Animation trägt den Namen example und kann entsprechend über diesen auch später referenziert werden.

Namensgebung von Animationsnamen

Zur Benennung deiner Animation solltest du am besten standardisiert vorgehen, so versteht jeder Entwickler intuitiv worum es geht und kann mit deinem Code etwas anfangen.

Weit verbreitet sind hierbei die folgenden Regeln:

  • englischsprachige Bezeichnungen
  • alles in Kleinbuchstaben
  • Zur Trennung logischer Bestandteile des Namens Bindestriche verwenden (da wo du sonst zum Beispiel Leerzeichen setzen würdest)

 

Generell ist bei den Namen rein technisch folgendes zu beachten:

A name identifying the animation. This identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be none, unset, initial, or inherit.

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

 

Nach der Namensgebung schließen sich nun die einzelnen Styles der verschiedenen Zustände/Keyframes der Animation an, diese werden alle innerhalb der geschweiften Klammern geschrieben.

Das besondere nun ist, dass sich die Styles ja in mehre Zustände gliedern, daher schreibst du dort hin, wo du sonst den Selektor einer CSS-Regel schreiben würdest, stattdessen eine zeitliche Festlegung.

Diese bestimmt dann, wann der Zustand der Animation ausgelöst wird.

Konkret hasst du hier verschiedene Optionen die Zeitpunkte zu markieren:

  • über die Keywords from und to
    • from beschreibt den Zustand beim Start der Animation
    • to hingegen den Zustand am Ende der Animation
  • über %-Angaben
    • hierbei ist eine unbegrenzte Anzahl an Zwischenstopps/Keyframes möglich

 

Beispiel von w3schools.com der from/to-Zuweisung

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Bei der oben stehenden Animation ist beim Start der Animation der Hintergrund des gewählten Elementes Rot und bei Ende ist dieser entsprechend Gelb.

Bei der Nutzung von Prozent-Angaben kann es zum Beispiel wie folgt aussehen (w3schools.com):

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Zuweisung der Animation

Nachdem die Animation nun definiert ist, kannst du diese einem beliebig selektierten HTML-Element mittels den entsprechenden CSS Deklarationen zuweisen.

Hierfür gibt es eine ganze Reihe an CSS Eigenschaften (Properties),  die du hierbei deklarieren kannst.

Die folgenden Eigenschaften sind zuweisbar:

  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

 

Erforderlich sind zunächst einmal der Name der Animation, in unserem Fall example sowie eine Zeitangabe, wie lange die Animation dauern soll.

Diese Eigenschaften sind beide in dem Selektor-Block des Elementes unterzubringen, welche die Animation erhalten soll, hier z. B. jeder div auf der Webseite.

div {
  animation-name: example;
  animation-duration: 2s;
}

Den Namen legst du durch folgende Eigenschaft fest:

animation-name: example;

Die Zeitangabe/Dauer der Animation dann entsprechend über:

animation-duration: 2s;

Hier hast du zunächst deinen Animationsnamen und anschließend eine bestimmte Zeitdauer, hier 2 Sekunden, angegeben, diese Angaben reichen bereits aus, dass deine Animation dem Element zugeordnet ist, und dieses somit animiert, so wie du es in der Abfolge der Keyframes deiner Animation festgelegt hast.

 

Weiterführende Inhalte

Die Details kannst du nochmals über folgende Links nachvollziehen, hier erhäst du zusätzlich ncoh weitere Einblicke in die Theamtik Animationen mittels CSS3:

 

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

 

Kommentare

Guten Morgen Herr Reichard,
Bitte noch die vielen Rechtschreibfehler korrigieren und man könnte die Inhalte noch etwas zusammenfassen. 

Dennoch Vielen Dank für die Aufbereitung.
LG Daniel

Bild von superuser

Hallo Daniel,
danke für dein Kommentar und Feedback. Wie du über die Versionen des Beitrages einsehen kannst stammt die Aufbereitung von mir. 
Drücke deine Vorstellungen einer zusammengefasst/optimierten Ausführung doch gerne zusätzlich einfach durch eine entsprechende Bearbeitung aus.
LG

Hallo, als Mitarbeiter der mdiencommunity hier hab ich das Wiki erstellt, der Autor ist jedoch ein anderer. Aber grundsätzlich sind die Wikis so, dass Korrekturen von jeder*jedem gemacht werden können. Ebenso wie ergänzungen. Es geht hier um eine gemeinsame Erstellung von Lerninhalten. Also nur ran.
Grüße
Peter Reichard