CSS/Tutorials/Animation/Animation

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Animation(Weitergeleitet von Keyframes)
Wechseln zu: Navigation, Suche

Mit CSS-Animation können Sie Elemente wie Bilder, Boxen oder Text animieren, indem eine (oder mehrere) CSS-Eigenschaft(en) im Verlauf der Animation unterschiedliche Werte erhalten.

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.

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 dann 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.
Textwelle (Einblenden und Vergrößern von Text) ansehen …
h2 {
  animation: textwelle 3s;
}

@keyframes textwelle {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }  
  70% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;	
  }
}

In diesem Beispiel wird die Überschrift mit opacity eingeblendet. Der keyframe textwelle besteht aus drei Wegpunkten:

  • Am Anfang der Animation ist die h2-Überschrift ausgeblendet
  • Bei 70% (der Animationsdauer) beträgt opacity: 1; die Größe wurde von 0 auf 125% vergrößert
  • von 70-100% wird die Größe auf 100% verkleinert, eine „Welle“ entsteht

Der keyframe wird mit der animation-Eigenschaft über seinen Namen (textwelle)aufgerufen und mit einer Dauer von 3s ausgeführt.

Beachten Sie: Bei Größenänderungen ist es ratsam Transformationen auszuführen. Diese werden von Browsern flüssiger ausgeführt, als eine Animation von Eigenschaften wie font-size, width, etc.


mehrfaches Aufrufen eines keyframes 
@keyframes orbit { 
  from { 
    transform: rotate(0) 
  } 
  to { 
    transform: rotate(360deg) 
  } 
}

#erde {
   animation: orbit 12s infinite linear;
}
#mond {
   animation: orbit 3s infinite linear;
}

Der keyframe mit dem Namen orbit sorgt für eine kreisförmige Rotation. Er wird zweimal über seinen Namen aufgerufen, wobei sich die Dauer unterscheidet.

Animationen - den Nutzer entscheiden lassen

Animationen können eine Seite beleben - sie können aber auch nerven. Dies kann bis hin zur körperlichen Übelkeit (Motion-triggered vestibular spectrum disorder) führen.[1][2] Deshalb lautet ein Grundsatz im Webdesign, dass Festlegungen im CSS die Wünsche der Nutzer berücksichtigen sollten.

Das Merkmal prefers-reduced-motion (bevorzugt weniger Bewegung) erkennt, ob der Nutzer eine Seite mit allen Animationen und Bewegungen sehen oder ausdrücklich darauf verzichten möchte.[3] Der Benutzer kann diese Präferenz über eine Einstellung im Betriebssystem oder im Browser angeben.

prefers-reduced-motion ansehen …
@media (prefers-reduced-motion: no-preference) {
	p {
		color: #FFF;
		background: no-repeat -5% / 10% 95% linear-gradient(91deg, #FF000020 0%, #FF0000E0 50%, #FF000020 100%), black;
		animation: 2s linear 0s infinite alternate wonky_cylon;
	}
	p::after {
		content: " - the Imperious Leader will find you!";
	}
}

@keyframes wonky_cylon {
	from {
		background-position: -10% -100%;
	}
	to {
		background-position: 110% 200%;
	}
}

Bei Animationen, die zum Inhalt gehören, könnten Sie mit der Web Animations API ein Kontrollfeld einbauen, in dem die Playback Rate entsprechend verlangsamt wird.

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.

Übrigens können Sie auch mehrere, durch Komma getrennte Animationen aufrufen:


Aufruf mehrerer Animationen 
.spaceship { 
  animation: rotation 12s, wobble 2s;
}

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.

Hauptartikel: CSS/Wertetypen/Namen_und_Zeichenketten

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.


animation-timing-function

Mit der 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
  • steps(Anzahl) – schrittweise, ohne dass jede Wegmarke einzeln notiert werden muss


Autorennen ansehen …
.formula-1 .linear  {
	animation-timing-function: linear;
}
 
.formula-1 .ease-in  {
	animation-timing-function: ease-in;
}
 
.formula-1 .ease-out  {
	animation-timing-function: ease-out;
}
 
.formula-1 .ease-in-out  {
	animation-timing-function: ease-in-out;
}
 
@keyframes rennen {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(25em);
  }
}

.formula-1 p {
	animation: rennen 3s infinite;
}

Über eine Animation rennen wird festglegt, die dass die p-Absätze (= Autos) nach einer Verzögerung von 3s mit translate() um 25em nach rechts verschoben werden.
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. Trotz der unterschiedlichen Beschleunigungskurven erreichen alle gleichzeitig das Ziel.

Übrigens, es wurden keine externen Bilder eingebunden, die Grafiken wurden alle mit CSS erzeugt.

Beachten Sie: Im Frickl-Modus kann das Ziel in kleinen Viewports außerhalb der sichtbaren Bereichs sein. Öffnen Sie das Beispiel mit Rechtsklick in einem neuen Tab.
Beachten Sie: Die animation-timing-function-Eigenschaft entspricht der Web Animations-Eigenschaft easing, hat im Unterschied zu dieser jedoch den Standardwert ease anstelle von linear.

Exkurs: Animationen steuern

Mit der Einführung von CSS-animation gab es Kritiker, die eine Umsetzung von Animationen in CSS als Verstoß gegen die Trennung von Inhalt, Präsentation und Verhalten ansahen. Allerdings wird heutzutage auch in JavaScript mit der WAAPI auf CSS-animation zurückgegriffen.

Das folgende Beispiel zeigt, wie eine Klickfunktionaliät nur mit CSS umgesetzt werden kann:

Animation nur mit CSS 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;
}
 
#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 werden animation-timing-function verschiedene Werte zugewiesen.

Beachten Sie: Die Buttons wurden nicht mit dem button-Element, sondern als Verweis mit dem a-Element realisiert, damit die Animation mit der Pseudoklasse :target ausgelöst und wieder gestoppt werden kann.

Dies bringt einen großen Nachteil: man kommt mit der Zurück-Button des Browsers nur zum letzten Zustand und nicht zur vorhergehenden Seite.

Mit dem Einsatz von wenigen Zeilen JavaScript könnte bei einem Klick auf einen Button die Klasse der p-Absätze geändert und damit die Animation ausgelöst werden. Dadurch würde auch das CSS einfacher und übersichtlicher werden.

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

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 (Wenn 1 angegeben wird, wird die Anzahl der Schritte in den keyframes verwendet.)
  • steps (Anzahl, end): (Standardwert) Animation wird am Ende des Schritts ausgeführt.
  • steps (Anzahl, start): Animation wird am Beginn des Schritts ausgeführt.
schrittweise Fortschrittsanzeige ansehen …
#schritte {
  animation: fortschritt 5s steps(30);
}

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

Die animation-timing-function und steps sind in der WAAPI unter der easing-TimingOption verfügbar.

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 unterschiedliche 

Dauer der Animation sind manche Autos schneller, andere langsamer.

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.

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


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 angezeigt
  • backwards: Das Element springt nach Beenden der Animation zum Anfangszustand zurück
  • both:

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

will-change

Mit der Eigenschaft will-change bereiten Sie den Browser auf künftige Animationen vor, die dann bereits berechnet werden. Dabei wird nicht die Software Rendering Engine des Browsers sondern die GPU zur Hardwarebeschleunigung herangezogen, die für mathematische und geometrische Berechnungen performanter ist.

Browserunterstützung
caniuse.com
Beispiel 
.animiert {
  transition: transform 1s ease-out;
}
.animiert:hover {
  will-change: transform;
}
.animiert:active {
  transform: rotateY(180deg);
}

Sobald Sie das animierte Element mit der Maus überfahren, wird das Transformieren vorbereitet. Ein Klick auf das Element aktiviert die Pseudoklasse :active und die Animation wird ausgeführt.


Folgende Angaben sind möglich:

  • auto
  • contents: zeigt an, dass der Inhalt bald geändert wird.
  • <custom-ident>: ermöglicht, zu ändernde Eigenschaften anzugeben
  • scroll-position: zeigt an, dass der Inhalt bald verschoben wird. Deshalb muss ihn der Browser nicht cachen.
Beachten Sie: Deklarieren Sie will-change nicht zusammen mit der zu animierenden Eigenschaft. Dann muss der Browser gleichzeitig neben der Animation auch die vorbereitende will-change-Berechnung ausführen, sodass die Animation sogar verlangsamt wird.
Empfehlung: Vermeiden Sie, zu viele Eigenschaften gleichzeitig zu deklarieren.


Siehe auch

Weblinks

Beispiele

will-change

  • ↑ web.dev: prefers-reduced-motion: Sometimes less movement is more von Thomas Steiner, 10.12.2019
  • ↑ Justus-Liebig-Universität: Das Vestibular-Syndrom
  • ↑ css-tricks: An Introduction to the Reduced Motion Media Query
    • Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Animation/Animation&oldid=98892#keyframes“