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
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.
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.animation
wird die Animation unter einem Namen abgespeichert. Diese Animation kann man mehreren Selektoren zuweisen. animation
kann man Animationen mehrmals wiederholen und außerdem kann man die Richtung der Animation bei der Wiederholung vor und zurücklaufen lassen.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.
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.
animation-name
Der Name einer Keyframe Regelanimation-duration
Die Dauer der AnimationDas 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;}
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
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;}
}
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.
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.
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. |
Mit der Wiederholungsrate gibt man an wie oft eine Animation wiederholt werden soll.
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 |
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.
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
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.
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 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.
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 |
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
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 |
Man kann eine CSS- Animation an einem SVG Pfad entlang erzeugen.
weitere Infos
#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"
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.
Mit der CSS3 Eigenschaft clip, ist es möglich einen Ausschnitt zu bestimmen, welcher den sichtbaren Bereich eines Objektes definiert. Alles andere ist verdeckt.
Hier wird ein Hintergrundbild verwendet und über background-position ein Hover Effekt erzeugt.
Beispiele zu Hintergrundposition und Größe siehe dieses Beispiel.
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.
Krokodile | Fische | Kreise 10 | Kreise 11 |