Youtube Video

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 CSS transition und animation

Start-Ereignis
transition braucht ein Ereignis, um zu starten während animation standardmäßig sofort startet. Das bedeutet aber nicht, dass man nicht auch animation erst durch ein Ereignis starten lassen kann. Dazu muss man lediglich die Eigenschaft animation-play-state einsetzen.
Mehrere Eigenschaften
Mit transition werden mehrere Eigenschaften zusammen animiert, während man bei animation für jede Eigenschaft verschiedene Zeiten festlegen kann. Es ist jedoch auch möglich bei transition den Eindruck zu erwecken, als würden die Eigenschaften nacheinander animiert, indem den Eigenschaften verschiedene Verzögerungs- und Dauerwerte zugewiesen werden. Bei komplexeren animationen ist animaton jedoch im Vorteil.
Mehrere Selektoren
Mit animation wird die Animation unter einem Namen abgespeichert. Diese Animation kann man mehreren Selektoren zuweisen.
Wiederholung und Vor- und Rücklauf
Mit animation kann man Animationen mehrmals wiederholen und außerdem kann man die Richtung der Animation bei der Wiederholung vor und zurücklaufen lassen.
Vorhandene Eigenschaften animieren
Mit transition werden vorhandene dem Selektor zugewiesene Eigenschaften animiert, während bei animation Eigenschaften animiert werden die erst ab dem Start der Animation zugewiesen werden. Das bedeutet aber keinen Nachteil für animation.

Zusammengefasst kann man sagen, dass animation mehr Möglichkeiten bietet, was gerade für komplexe Animationen von Vorteil ist. transition ist jedoch einfacher, wenn man nur eine Eigenschaft animieren will, die durch ein Ereignis ausgelöst wird. Wenn die Animation ohne Ereignis sofort starten soll, wäre animation die bessere Wahl.

animation

Kurzschreibweise

Man kann ein Animation mittels der Kurzschreibweise animation zuweisen. Die CSS Eigenschaft animation fasst mehre animation-Eigenschaften zusammen. Es müssen mindestens die Werte der Eigenschaften animation-name und animation-duration zugewiesen werden.

Das heißt man weist animation einem Selektor zu und gibt dort den Namen einer Keyframe Regel an und die Dauer der Animation in Sekunden mit der Einheit s hinten angehängt.

div{animation: myAni 7s;}

CSS3 @keyframe rule

Die Keyframe Regel wird wie folgt aufgeführt. Man weist ihr einen selbst vergebenen Namen zu und definiert dort die Eigenschaften, die animiert werden sollen. (keine Sonderzeichen und Leerzeichen im Namen) siehe Beispiel

Standardsyntax

div{animation: myAni 7s;}

@keyframes myAni

{
	from{background: #F00;}

	to{background: #FF0;}
}
So siehts aus

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. 100% oder das Schlüsselwort to steht für das Ende. Alle anderen Prozentwerte beziehen sich logischerweise auch auf den Zeitraum.

@keyframes pump
{
0%   {height: 100px; width: 20px;}
10%  {height: 10px;}    
20%  {height: 100px;}
30%  {height: 10px;}
40%  {height: 100px;}
50%  {height: 10px;}
60%  {height: 100px;}
70%  {height: 10px;}
80%  {height: 100px;}
90%  {height: 10px;}
100% {height: 100px; width: 200px;}
}

so sieht's aus

Im obigen Beispiel sieht man eine der Stärken von CSS - Animation, denn hier werden Eigenschaften unabhängig voneinander animiert. Die Höhe bewegt sich ständig hoch und runter während die Breite nur am Anfang und Ende der Animation definiert wird. Das wäre mit transition so nicht möglich.

animation-name / animation-duration / animation-delay

Name, Dauer, Verzögerung

Anstatt die Kurzschreibweise animation zu nutzen, kann man auch mehrere Eigenschaften einzeln notieren. Es sollte mindestens animation-name und animation-duration zugewiesen werden. animation-delay erwartet einen Verzögerungswert in Sekunden, so dass die Animation nicht sofort startet.

animation
Eigenschaft Wert Bedeutung
Standardwert none, 0s, 0s
animation-name Name der Keyframe Regel Die Eigenschaften werden in einer Keyframe Regel animiert. Diese Keyframe Regel bekommt einen selbstvergebenen Namen. Dieser Name wird animation-name zugewiesen.
animation-name: meineAnimation;
animation-duration 1s Die Dauer der Animation. s steht für Sekunden und muss ohne Leerzeichen an den numerischen Wert angehängt werden.
animation-delay 1s Verzögerungszeitraum bevor die Animation startet. Die Einheit s für Sekunden wird ohne Leerzeichen an den numerischen Wert angehängt.

animation-iteration-count

Wiederholungsrate

Mit der Wiederholungsrate gibt man an wie oft eine Animation wiederholt werden soll.

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

animation-play-state

Abspielen und Anhalten

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

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

animation-direction

Richtung vorwärts. rückwärts und vor und wieder zurück

animation-direction definiert, ob die Animation in rückwärtiger, normaler oder alternativer Richtung abgespielt werden soll. Alternativ bedeutet man kann einstellen, dass eine Animation bei mehrmaligen Durchlauf vor- und zurück läuft.

so sieht`s aus

animation-direction
Eigenschaft Wert Bedeutung
Standardwert normal
animation-direction normal Normaler Ablauf
reverse Rückwärts vom Ende zum Anfang
alternate

Die Animation startet In normaler Richtung und läuft dann zurück etc.

Beim Start und in den ungeraden Zeiten (1,3,5,etc..) vorwärts.

Im zweiten Durchlauf und den geraden Zeiten (2,4,6,etc...) rückwärts.

alternate-reverse

Die Animation startet rückwärts und läuft dann vorwärts etc.

Beim Start und in ungeraden Zeiten (1,3,5,etc..) rückwärts .

Im zweiten Durchlauf und den geraden Zeiten (2,4,6,etc...) vorwärts.

initial Zurücksetzen auf Standard
inherit Erbt die Eigenschaft vom Eltern Element

animation-fill-mode

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.

Mittels animation-fill-mode gibt man an, ob die Eigenschaft, die zu Anfang und/oder am Ende der definierten Animation stehen dem Element auch als generelle Eigenschaft vor der Animation und/oder nach der Animation zugewiesen werden soll.

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

animation-timing-function

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

Pfad Animation

Man kann eine CSS- Animation an einem SVG Pfad entlang erzeugen.
weitere Infos

siehe Beispiel

  #apfel {
            position: absolute;
            width: 62px;
            height: 33px;
            motion-path: path('M86.5 194.5c0,-75.107 33,-134 87,-101 54,33 -38,47 20,117 58,70 261,-45 107,-126 -154,-81.001 8.001,186 -86,222 -94,36 -128,-44.881 -128,-112z');
            offset-path: path('M86.5 194.5c0,-75.107 33,-134 87,-101 54,33 -38,47 20,117 58,70 261,-45 107,-126 -154,-81.001 8.001,186 -86,222 -94,36 -128,-44.881 -128,-112z');
            animation: spiral 10s linear infinite;
        }
        
        @keyframes spiral {
            0% {            
                offset-distance: 0
            }
            100% {          
                offset-distance: 100%
            }
        }

Der Pfad wurde in Corel Draw in einer Datei mit einer Pixelgröße von 400 x 400 Pixeln erstellt und als SVG-Datei gespeichert. Siehe dazu den Quelltext SVG Datei.

Wie man sieht, wird der Pfad als Variable d abgespeichert und muss in motion-path und offset-path kopiert werden.

d="M86.5 194.5c0 ... -44.881 -128,-112z"

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.

Homage to the Square

Mein Großonkel und Bauhauskünstler Josef Albers ist für seine Bilder "Homage to the Square" bekannt. Als Homage für Josef Albers habe ich diese CSS Animation erstellt.

Homage to Josef Albers

Psycedelic Background (nicht für jederman)

Krokodile | Fische | Kreise 10 | Kreise 11 |