CSS3 Animation

Mit CSS3 kann man Animationen erstellen, in Form von zeitlichen Übergängen der CSS Eigenschaften. Folgende Themen und Eigenschaften sind hier von Bedeutung.
animation | transition | transform 3d transform
Siehe hierzu auch die Seite css3.bradshawenterprises.com
Unterschiede zwischen Animation und Transition siehe hier

Eine CSS3 @keyframe Regel wird an einen Selektor gebunden. Hier müssen mindestens 2 Eigenschaften definiert werden

In der @keyframe Regel werden die Eigenschaften definiert, die sich verändern sollen.

Standardsyntax

div{animation: firstTry 7s;}

@keyframes firstTry

{
	from{background: #F00;}

	to{background: #FF0;}
}

Syntax für Chrome, Safari, Opera

Nicht alle Browser benutzen die Standardsyntax, daher sollte man zuätzlich folgende Syntax hinzufügen.

div {-webkit-animation: firstTry 7s; }

@-webkit-keyframes firstTry
{
	from {background: #F00;}
	to {background: #FF0;}
}

So siehts aus

CSS3 @keyframe rule

In einer CSS Animation ändern sich CSS Eigenschaften über einen Zeitraum hinweg. Man kann soviele Eigenschaften definieren wie man will. Die Schlüsselworte from und to definieren Anfang und Ende der zeitlichen Abfolge. Stattdessen kann man auch Prozentwerte angeben. 0% oder das Schlüsselwort from enstrpicht dem Beginn der Animation, während 100% oder to das Ende darstellt.

/* Standard syntax */
@keyframes firstTry
{
  0%   {background-color: hsl(1,100%,50%); width: 200px;}
  25%  {background-color: hsl(120,100%,50%);}
  50%  {background-color: hsl(240,100%,50%); width: 100px;}
  100% {background-color: hsl(360,100%,50%); width: 200px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes firstTry
{
  0%   {background-color: hsl(1,100%,50%); width: 200px;}
  25%  {background-color: hsl(120,100%,50%);}
  50%  {background-color: hsl(240,100%,50%); width: 100px;}
  100% {background-color: hsl(360,100%,50%); width: 200px;}
}
so sieht's aus

CSS3 Animation

Wie anfangs erwähnt, wird die CSS3 Animation an einen Selektor gebunden. Hier müssen mindestens 2 Eigenschaften definiert werden, der Name der Animation und die Dauer. Es gibt allerdings noch mehr Eigenschaften, welche die Art der Animation genau definieren. Die Eigenschaft animation ist eigentlich die Kurzschreibweise für mehrere animation- Eigenschaften.

animation
Eigenschaft Wert Bedeutung
Standardwert none, 0s, 0s
animation-name gueltigerName Ein selbst vergebener Name für die Animation, welche an einen Selektor gebunden wird.
animation-duration 1s Die Dauer der Animation. s steht für Sekunden.
animation-delay 1s Verzögerungszeitraum bevor die Animation startet.

Wiederholungsrate

animation-iteration-count
Eigenschaft Wert Bedeutung
Standardwert 1
animation-iteration-count Ganzzahl Wiederholung der Animation
infinite dauernde Wiederholung
initial zurücksetzen auf den Standardwert
  inherit Erbt die Eigenschaft vom Eltern Element

Play und Pause

Mittels animation-play-state kann man eine Animation stoppen oder ablaufen lassen. Hier ein einfaches Beispiel. Komplexere Steuerungsvorgänge kann man mit Javascript realisieren.

animation-play-state
Eigenschaft Wert Bedeutung
Standardwert running
animation-play-state running Die Animation läuft
paused Die Animation ist angehalten
initial zurücksetzen auf den Standardwert
  inherit Erbt die Eigenschaft vom Eltern Element

Richtung

animation-direction definiert, ob die Animation in rückwärtiger, normaler oder alternativer Richtung abgespielt werden soll.

animation-direction
Eigenschaft Wert Bedeutung
Standardwert normal
animation-direction normal Normaler Ablauf
reverse Rückwärts vom Ende zum Anfang
alternate In normaler Richtung läuft die Animation in den ungeraden Zeiten (1,3,5,etc..) rückwärts in den geraden Zeiten (2,4,6,etc...)
alternate-reverse In rückwärtiger Richtung läuft die Animation in den ungeraden Zeiten (1,3,5,etc..) in normaler Richtung in den geraden Zeiten (2,4,6,etc...)
initial Zurücksetzen auf Standard
inherit Erbt die Eigenschaft vom Eltern Element

CSS Eigenschaften vor und nach der Animation

animation-fill-mode definiert welche Stile auf das Element angewendet werden, wenn die Animation nicht abläuft.

Die Eigenschaften, die man für eine Animation definiert werden standardmäßig auch nur während der Animation angewendet. Mittels animation-fill-mode kann man dieses Standardverhalten ändern.

Beispiel

animation-fill-mode
Eigenschaft Wert Bedeutung
Standardwert none
animation-fill-mode none Keine Beeinflussung der Eigenschaften vor oder nach Ablauf der Animation.
forwards Nachdem die Animation abgelaufen ist, behält das Objekt die letzten Eigenschaften der Animation.
backwards Bevor die Animation abläuft, werden dem Element die Eigenschaften zugewiesen, die in der Animation für den ersten keyframe definiert sind.
both forwards und backwards Regeln werden angewendet.
initial Zurücksetzen auf Standard
inherit Erbt die Eigenschaft vom Eltern Element

Beschleunigung und Abbremsen

Mit animation-timing-function lässt sich der Ablauf der Animation im Sinne von Beschleunigung oder Abbremsen beeinflussen. Hierzu werden mathematische Bezierkurven eingesetzt. so sieht's aus

Man kann auch eigene Timing Functions erzeugen mit dem Ceaser CSS Easing Tool ist das sehr einfach.

Bezier Timing Functions siehe Smashing Magazine

animation-timing-function
Eigenschaft Wert Bedeutung
Standardwert ease
animation-timing-function linear Gleichmäßiger Zeitlablauf
ease Zu Beginn langsam, dann ein gleichmäßiger schneller Ablauf, am Ende abbremsen
ease-in Langsam beim Start, schneller werdend.
ease-out Zum Ende langsamer werdend.
ease-in-out Langsam am Anfang zur Mitte hin schneller werdend, zum Ende hin langsamer werden. Im Gegensatz zu ease hat man hier einen stetigen Geschwindigkeitswechsel über den gesamten Zeitraum, während man bei ease einen längeren gleichmäßigen schnellen Zeitablauf im Mittelbereich hat.
cubic-bezier(n,n,n) Geben Sie eigene Werte ein. Erlaubt sind Werte zwischen 0 und 1.
initial Zurücksetzen auf Standard
inherit Erbt die Eigenschaft vom Eltern Element

Tipps & Beispiele

Eine Website lässt sich aufwerten, wenn auf jeder Hauptseite ein Bild passend zum Thema angezeigt wird. Mittels einer kleinen Animation, lenkt man die Aufmerksamkeit des Users auf die Seite. Im folgenden ein Beispiel in 2 Schritten.

Beispiel Intro Teil 1, Teil 2

Vorhang Animation mit Clip

Mit der CSS3 Eigenschaft clip, ist es möglich einen Ausschnitt zu bestimmen, welcher den sichtbaren Bereich eines Objektes definiert. Alles andere ist verdeckt.

Beispiel

Cooler Button Effekt

Hier wird ein Hintergrundbild verwendet und über background-position ein Hover Effekt erzeugt.

Beispiel

Beispiele zu Hintergrundposition und Größe siehe dieses Beispiel.

Psycedelic Background (nicht für Epileptiker geeignet)

Kreise 8 | Kreise 9 | Kreise 10 | Kreise 11 | (animiert nicht für Epileptiker)