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.

• animation-name Der Name einer Keyframe Regel
• animation-duration Die Dauer der Animation

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;}
}

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-iteration-count

Wiederholungsrate

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

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-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-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-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

Pfad Animation

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

siehe Beispiel / siehe Beispiel2

  #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"

Animationen mit Scrollleiste animieren

Siehe dazu auch Scroll Driven Animations

siehe auch 12 days of Web

Anstatt mit animation-duration eine Zeit zu bestimmen, kann man eine Animation auch mit der Scrollposition bestimmen.

Hier gibt es 2 Möglichkeitnen

Animationen mit Scrollposition: Eine Zeitachse, die mit der Scrollposition eines Scrollcontainers entlang einer bestimmten Achse verknüpft ist.

Fortschritts-Zeitachse: Eine Zeitachse, die mit der relativen Position eines bestimmten Elements innerhalb seines Scroll-Containers verknüpft ist. Damit können Elemente eingeblendet werden, sobald sie sichtbar sind. Beispiele weiter unten

Firefox 2024 scroll-animation

Firefox muss 2024 noch konfiguriert werden, damit es funktioniert. Gebe dazu in der Adresszeile folgendes ein:
about:config

Suche nach folgender Zeile und setze sie auf true:
layout.css.scroll-driven-animations.enabled = true;

Starte Firefox neu.

Außerdem muss man in CSS folgende Eigenschaft setzen:
animation-duration: 1ms;

Animationen mit Scrollposition

animation-duration

Normalerweise setzt man mit animation-duration die Zeitdauer fest. Will man eine Scroll-Animation erstellen, setzt man animation-duration: auto. Wenn animation-duration nicht gesetzt ist, bekommt es auch den für diesen Fall notwendigen Standardwert auto.

Im Moment 2024 muss man allerdings für alle Mozilla Browser die Zeitdauer auf eine Millisekunde setzen:
animation-duration: 1ms;

animation-timeline

Um die Animation mit der Scrollposition zu verknüpfen wird die Eigenschaft animation-timeline mit einer scroll() Funktion eingesetzt. In dieser Scrollfunktion gibt es die beiden Parameter scroller und axis. Hier kann man verschiedene Argumente einsetzen. Lässt man diese weg, greifen die Standardwerte scroll(nearest block)

scroller

Der erste Parameter scroller von scroll kann folgende Werte bekommen:

• nearest Verwendet den nächstgelegenen Ancestor-Scrollcontainer (Standardeinstellung).
• root Der Darstellungsbereich des Dokuments wird als Scrollcontainer verwendet.
• self Das Element selbst wird als Scrollcontainer verwendet.

axis

Der zweite Parameter axis der Scroll Funktion hat folgende Argumente:

• block Verwendet die Fortschrittsmessung entlang der Blockachse des Scrollcontainers (Standardeinstellung).
• inline verwendet das Maß für den Fortschritt entlang der Inline-Achse des Scroll-Containers.
• y verwendet das Maß für den Fortschritt entlang der Y-Achse des Scrollcontainers.
• x verwendet das Maß für den Fortschritt entlang der X-Achse des Scrollcontainers.

animation-timeline muss nach der Kurzschreibweise animation eingesetzt werden.

animation-timeline: scroll(root, inline)

siehe Beispiel 10

Benannte Scrollleiste

siehe Beispiel 11

siehe Beispiel 12

In diesen Beispielen geht es darum, dass man die Scrollleiste irgendeines HTML-Elements verwenden kann, um irgendein anderes Element damit zu animieren.

Das macht man mit benannten Scrollleisten. Wichtig ist, dass das Element welches animiert werden soll, ein Nachfahre des Elements sein muss, dessen Scrollleiste verwendet wird.

Das Element dessen Scrollleiste verwendet wird, bekommt einen selbstvergebenen Namen, der mit 2 Bindestrichten beginnen muss:

scroll-timline-name: --myScrollbar

Man verwendet nicht die zuvor erklärte Eigenschaft animation-timeline: scroll();
Man definiert außerdem den Wert für die Achse. siehe oben

scroll-timeline-axis: inline

Man kann beide Eigenschaften in der Kurzschreibweise zusammenfassen:

scroll-timeline: --myScrollbar inline;

Das Element welches animiert werden soll braucht selbstverständlich wieder die Eigenschaft animation-name mit dem Verweis auf die @keyframes Regel und eventuell weitere animation-Eigenschaften.

Der Verweis auf die Scrollleiste geschieht folgendermaßen:

animation-timeline: --myScrollbar;

In diesem Beispiel gehe ich davon aus, dass das Vorfahrenelement mit der Scrollbar die Eigenschaft scroll-timline-name: --myScrollbar bekommen hat.

Animation mit Fortschritts Zeitachse

siehe Beispiel 13, siehe Beispiel 14

Hier wird nicht die Position einer Scrollleiste eingesetzt, sondern vielmehr die Position eines Elements. Es wird ermittelt, ob ein Element sichtbar ist oder der Bereich, in dem ein Element auf dem Bildschirm zu sehen ist wird für die Animation eingesetzt.

view() statt scroll()

Auch hier wird anstatt animation-duration die Eigenschaft animation-timeline eingesetzt. Doch der Wert wird hier anstatt durch eine scroll() Funktion durch eine view() Funktion bestimmt.

animation-timline: view(block);
animation-name: myScrollAni;
animation-range: cover;
/*für Firefox*/
animation-duration: 1ms;

animation-range

Siehe auch die Animation-range Toolbox

Mittels animation-range und den dazugehörigen Schlüsselwörtern kann man den Eintritt und Ausgang der Animation genauer bestimmen.

animation-range: entry;

Schlüsselwörter sind: entry, contain, cover, exit, entry-crossing, exit-crossing

• cover: Stellt den gesamten Bereich der Zeitachse für den Aufrufverlauf dar. Die Animation startet wenn das Element zu sehen ist und endet, wenn die Unterkante des Elements an die Oberkante des Elternelements stösst.
• entry: Stellt den Bereich dar, in dem das Hauptkontofeld in den Sichtbarkeitsbereich der Ansicht eintritt. Die Animation startet wenn des Element erscheint und endet, wenn es komplett zu sehen ist.
• exit: Stellt den Bereich dar, in dem das Hauptkontofeld den Sichtbarkeitsbereich der Ansicht verlässt. Die Animation startet wenn die Oberkante des Elemnts an die Oberkante des Elternelements stösst und endet wenn die Unterkante des Elements an die Oberkante des Elternelements stösst.
• entry-crossing: Stellt den Bereich dar, in dem die Hauptkasten den Endrahmen überschreitet. Wenn das Element höher ist als das Elternelement endet die Animation wenn die Unterkante des Elements an die Unterkante des Elternelements stösst. Bei entry endet die Animation, wenn die Oberkante des Elements die Oberkante des Elternelements erreicht.
• exit-crossing: Stellt den Bereich dar, in dem die Hauptkasten den Startrand überschreitet. Wenn das Element höher ist als das Elternelement startet die Animation, wenn die Oberkante des Elements die Oberkante des Elternelements erreicht. Bei exit startet die Animation, wenn die Unterkante des Elements die Unterkante des Elternelements erreicht hat.
• contain: Stellt den Bereich dar, in dem das Hauptkonto vollständig im Sichtbarkeitsbereich des Ansichtsfortschritts innerhalb des Scrollports entweder vollständig enthalten ist oder vollständig abdeckt. Das hängt davon ab, ob das Motiv höher oder kürzer als der Scroller ist. Bei einem kleineren Element startet die Animation , wenn das Element komplett zu sehen ist und endet, wenn es mit der Oberkante an die Oberkante des Elternelements anstösst.

Teste auf dieser Seite die verschiedenen Werte.

Teste auf dieser Seite die verschiedenen Werte im Google Chrome Developer..

Auf dieser Seite (etwas tiefer scrollen) kann man die Einstellungen online testen.

Im Beispiel 13 wurde eine Animation zugewiesen, in welcher die Bilder mittels opacity ein-, aus- und wieder eingeblendet werden und mit folgendem Code versehen.

animation-range: cover;

Im Beispiel14 werden die Bilder mittels opacity nur eingeblendet und mit folgendem Code versehen:

animation-range: entry;

siehe auch Beispiel 15
Hier wird neben opacity die Eigenschaft clip-path eingesetzt.

siehe dieses Beispiel 19 eine Anleitung findet ihr bei Scroll Driven Animations

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 |