CSS/Eigenschaften/Animation/Animation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das menschliche Auge reagiert instinktiv auf Bewegung. Deshalb sind Animationen eine gute Möglichkeit, Aufmerksamkeit und Interesse auf Ihrer Webseite zu erregen. Animieren kommt aus dem Lateinischen und heißt ursprünglich zum Leben erwecken.

Mit CSS-Animation können Sie Bilder und Elemente animieren. Anders als bei transition können Sie auch mehrstufige Animationen festlegen. In einer @keyframes-Regel können Sie Wegpunkte für den Ablauf der Animation setzen, die dann von der Eigenschaft animation aufgerufen werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Inhaltsverzeichnis

[Bearbeiten] @keyframes

Mit der @keyframes-Regel können Sie die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem Sie Wegpunkte setzen, die während der Sequenz an bestimmten Punkten erreicht werden.

Eine @keyframes-Regel hat drei Bestandteile:

  • einen Namen, der mit der Eigenschaft animation-name aufgerufen wird.
  • Wegpunkte:
    • entweder Start- und Endpunkt mit den Schlüsselwörtern from und to
    • oder mehrere Wegpunkte mit Prozentwerten
  • Wertangaben für die zu animierenden CSS-Eigenschaften in den geschweiften Klammern nach den Schlüsselwörtern bzw. Prozentangaben.


Beispiel
@keyframes orbit { 
  from { 
    transform: rotate(0) 
  } 
  to { 
    transform: rotate(360deg) 
  } 
}
 
#erde {
   animation: orbit 12s infinite linear;
}
#mond {
   animation: orbit 3s infinite linear;
}
Beispiel ansehen …
@keyframes textwelle {
  0 {
    font-size: 0;
    opacity: 0;
  }
  90% {
    font-size: 220%;
    opacity: 1;
  }
  100% {
    font-size: 200%;
    opacity: 1;	
  }
}

[Bearbeiten] animation

Die Eigenschaft animation ist eine Zusammenfassung der möglichen Einzelangaben animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction und animation-fill-mode.

Wenn Sie zwei Zahlenwerte angeben, ist der erste die Dauer, der zweite immer Beginn der Animation.


[Bearbeiten] animation-name

Die Eigenschaft animation-name ruft die passende @keyframes Regel für die Animation auf.

Beispiel ansehen …
h2 {
  animation: textwelle 2s;
}
Beachten Sie: Sie können Ihrer Animation beliebige (optimalerweise sinnvolle) Namen geben.

Folgende Begriffe sind aber reserviert und führen zum Abbruch der Animation:

ease, linear, infinite, alternate, running, paused, usw.


[Bearbeiten] animation-duration

Die Eigenschaft animation-duration legt die Dauer der Animation fest.

  • Zeit: Zeitangabe in Sekunden (s) oder Millisekunden (ms)
    Standardwert ist 0
  • initial: Setzt den Wert auf den Standardwert zurück.
  • inherit: Erbt den Wert vom Elternelement.


[Bearbeiten] animation-timing-function

Die Eigenschaft animation-timing-function können Sie Beschleunigungskurven der Animation definieren.


Folgende Angaben sind möglich:

  • ease: Übergang mit langsamen Start, beschleunigt und endet langsam (Standardwert) (⇔ cubic-bezier(0.25,0.1,0.25,1))
  • linear: Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop (⇔ cubic-bezier(0,0,1,1))
  • ease-in: Übergang mit einem langsamen Start (⇔ cubic-bezier(0.42,0,1,1))
  • ease-out: Übergang mit einem langsamen Ende (⇔cubic-bezier(0,0,0.58,1))
  • ease-in-out: Übergang mit einem langsamen Start und Ende (⇔ cubic-bezier(0.42,0,0.58,1))
  • cubic-bezier(n,n,n,n): möglich sind numerische Werte zwischen 0 bis 1
  • initial: Werte werden auf Standardwert zurückgesetzt
  • inherit: Werte werden vom Elternelement übernommen
Beispiel ansehen …
#go:target .formula-1 p.linear  {
	animation-timing-function: linear;
}
 
#go:target .formula-1 p.ease-in  {
	animation-timing-function: ease-in;
}
 
#go:target .formula-1 p.ease-out  {
	animation-timing-function: ease-out;
}
 
#go:target .formula-1 p.ease-in-out  {
	animation-timing-function: ease-in-out;
}
 
@keyframes rennen {
  0% {
    transform: translate(0);
  }
 
  100% {
    transform: translate(780px);
  }
}
 
#go:target .formula-1 p {
	animation: rennen 3s;
}
Durch das Drücken des #go-Buttons wird die Animation rennen gestartet. Innerhalb von 3 Sekunden werden die Autos 780px nach rechts geschoben. In den Klassen wird animation-timing-function verschiedene Werte zugewiesen.

Im Beispiel sehen Sie, wie die Animation je nach gewählter timing-function unterschiedlich beschleunigt. Übrigens, es wurden keine externen Bilder eingebunden, die Grafiken wurden alle mit CSS erzeugt. Die Animation wird mit der Pseudoklasse :target ausgelöst und wieder gestoppt.


[Bearbeiten] steps - Schritte anstelle von graduellen Übergängen

Wenn die einzelnen Schritte gleichmäßige Änderungen erzielen sollen, können Sie wie hier bei dieser Fortschrittsanzeige mit der Eigenschaft animation-timing-function steps() (Schritte) festlegen, ohne jede mögliche Wegmarke einzeln festzulegen.

Folgende Angaben sind möglich:

  • steps (Anzahl): positive Zahl
  • steps (Anzahl, end): (Standardwert) Animation wird am Ende des Schritts ausgeführt.
  • steps (Anzahl, start): Animation wird am Beginn des Schritts ausgeführt.
Beispiel ansehen …
#schritte {
  animation: fortschritt 5s steps(20);
}
 
@keyframes fortschritt { 
    from {width: 0% }
    to { width: 100% }
}
Als Fortschrittsbalken wird ein output-Element verwendet. Während der obere Balken linear größer wird, werden im unteren Balken mit der id schritte die Fortschritte in verschiedenen Stufen angezeigt.


[Bearbeiten] animation-delay

Die Eigenschaft animation-delay legt den Beginn der Animation fest.

Folgende Angaben sind möglich:

  • Zeitangabe: Wertangabe in Sekunden (s) oder Millisekunden (ms)
    Standardwert ist 0
  • initial: Setzt den Wert auf den Standardwert zurück.
  • inherit: Erbt den Wert vom Elternelement.
Beispiel ansehen …
#buehne figure:nth-of-type(2) {
  animation-delay: 5s;
}
#buehne figure:nth-of-type(1) {
  animation-delay: 10s;
}
Die drei Bilder werden durch eine Animation aus- und wieder eingeblendet. Um die gleiche Animation nutzen zu können, erhalten sie eine Verzögerung. Fünf Sekunden nachdem das erste Bild transparent wird, startet nun die Animation für das mittlere Bild und danach die für das untere, im HTML-Code erste Bild.

Sie können eine Animation aber auch in der Mitte beginnen lassen, indem Sie animation-delay einen negativen Wert geben:

Beispiel ansehen …
p:nth-of-type(1)  {
  animation-duration: 6s;
  animation-delay: -2s;
}
 
p:nth-of-type(2)   {
  animation-duration: 5s;
  animation-delay: 0;
}
 
p:nth-of-type(3)   {
  animation-duration: 3s;
  animation-delay: 2s;	
}
 
p:nth-of-type(4)   {
  animation-duration: 4s;
  animation-delay: 1s;	
}
Die Autos fahren ein Rennen, das jedoch unterschiedliche Startzeiten hat, da die Werte für animation-delay unterschiedlich sind. Durch die unterscheidliche Dauer der Animation sind manche Autos schneller, andere langsamer.


[Bearbeiten] animation-direction

Die Eigenschaft animation-direction legt fest, welchen Verlauf die Animation nehmen soll.

  • normal: (Standardwert)
  • reverse: Animation soll rückwärts ablaufen
  • alternate: wird jeweils 1x vor (1,3,5,etc..) und dann rückwärts (2,4,6,etc...) abgespielt
  • alternate-reverse: wird jeweils 1x rückwärts (1,3,5,etc..) und dann vorwärts (2,4,6,etc...) abgespielt
  • initial: Setzt den Wert auf den Standardwert zurück.
  • inherit: Erbt den Wert vom Elternelement.
Beispiel ansehen …
#orbit aside {
  animation-name:orbit;
  animation-duration:4s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
 
@keyframes orbit { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }	 
 
#pendel aside {
  animation: pendel 2s infinite alternate ease-in-out;
}
 
@keyframes pendel { to { transform: rotate(-60deg); }}
Im linken Beispiel mit animation-timing-function: linear; bewegt sich #orbit aside ununterbrochen 360 Grad um das Zentrum. Die Animation auf der rechten Seite schwingt bei #pendel aside bei -60 Grad wieder zurück, da animation-timing-function: alternate; eingestellt ist.

[Bearbeiten] animation-iteration-count

Die Eigenschaft animation-iteration-count legt fest, wie oft die Animation wiederholt werden soll.

Folgende Angaben sind möglich:

  • Zeit: numerische Zahl (Standardwert ist 1)
  • infinite: Endlosschleife
  • initial: Setzt den Wert auf den Standardwert zurück.
  • inherit: Erbt den Wert vom Elternelement


[Bearbeiten] animation-fill-mode

Die Eigenschaft animation-fill-mode legt fest, welchen Zustand das animierte Element nach Beendigung der Animation haben soll.

Folgende Angaben sind möglich:

  • none: (Standardwert)
  • forwards: Der Endzustand wird weiterhin angeziegt
  • backwards: Das Element springt nach Beenden der Animation zum Anfangszustand zurück
  • both:

[Bearbeiten] animation-play-state

Die Eigenschaft animation-play-state zeigt an, ob die Animation läuft oder pausiert. Die Einstellung animation-play-state: paused; ist besonders dann nützlich, wenn Sie die Animation durch JavaScript steuern wollen.

Oft lassen sich Animationen auch durch bloßes Überfahren mit der Maus anhalten. Dies lässt sich per CSS erreichen, indem animation-play-state: paused; bei einem :hover gesetzt wird.

Folgende Angaben sind möglich:

  • running: (Standardwert)
  • paused: Animation ist angehalten

[Bearbeiten] Animationen mit JavaScript steuern

[Bearbeiten] Event-Handling

Sie können CSS-Animationen durch folgende Event-Handler ansprechen:


Achtung!

Die Eigenschaft animation ist derzeit (Stand: August 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-animation

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

[Bearbeiten] siehe auch

[Bearbeiten] Weblinks

Beispiele

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML