CSS/Tutorials/Animation/Animation
Text-Info
- 30min
- mittel
- Grundkenntnisse in CSS
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.
Details: caniuse.com
Inhaltsverzeichnis
keyframes[Bearbeiten]
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
fromundto
oder - mehrere Wegpunkte mit Prozentwerten
- entweder Start- und Endpunkt mit den Schlüsselwörtern
- Wertangaben für die zu animierenden CSS-Eigenschaften in den geschweiften Klammern nach den Schlüsselwörtern bzw. Prozentangaben.
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.
@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[Bearbeiten]
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.
@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[Bearbeiten]
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:
.spaceship {
animation: rotation 12s, wobble 2s;
}
animation-name[Bearbeiten]
Die Eigenschaft animation-name ruft die passende @keyframes Regel für die Animation auf.
h2 {
animation: textwelle 2s;
}
Folgende Begriffe sind aber reserviert und führen zum Abbruch der Animation:
ease, linear, infinite, alternate, running, paused, usw.
animation-duration[Bearbeiten]
Die Eigenschaft animation-duration legt die Dauer der Animation fest.
Zeit: Zeitangabe in Sekunden (s) oder Millisekunden (ms)
Standardwert ist 0initial: Setzt den Wert auf den Standardwert zurück.inherit: Erbt den Wert vom Elternelement.
animation-timing-function[Bearbeiten]
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 1initial: Werte werden auf Standardwert zurückgesetztinherit: Werte werden vom Elternelement übernommen- steps(Anzahl) – schrittweise, ohne dass jede Wegmarke einzeln notiert werden muss
.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 transform: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.
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[Bearbeiten]
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:
#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;
}
Dies bringt einen großen Nachteil: man kommt mit der Zurück-Button des Browsers nur zum letzten Zustand und nicht zur vorhergehenden Seite.
Information: Animationen mit JavaScript steuern
- Dabei greift das JavaScript direkt in die CSS-Eigenschaften ein und animiert diese.
- Diese Animationen können bequem durch den Benutzer gesteuert werden.
Sie können CSS-Animationen durch folgende Event-Handler ansprechen:
steps - Schritte anstelle von graduellen Übergängen[Bearbeiten]
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.
#schritte {
animation: fortschritt 5s steps(30);
}
@keyframes fortschritt {
from {width: 0% }
to { width: 100% }
}
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[Bearbeiten]
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 0initial: Setzt den Wert auf den Standardwert zurück.inherit: Erbt den Wert vom Elternelement.
#buehne figure:nth-of-type(2) {
animation-delay: 5s;
}
#buehne figure:nth-of-type(1) {
animation-delay: 10s;
}
Sie können eine Animation aber auch in der Mitte beginnen lassen, indem Sie animation-delay einen negativen Wert geben:
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;
}
animation-delay unterschiedlich sind. Durch die unterschiedliche
Dauer der Animation sind manche Autos schneller, andere langsamer.animation-direction[Bearbeiten]
Die Eigenschaft animation-direction legt fest, welchen Verlauf die Animation nehmen soll.
normal: (Standardwert)reverse: Animation soll rückwärts ablaufenalternate: wird jeweils 1x vor (1,3,5,etc..) und dann rückwärts (2,4,6,etc...) abgespieltalternate-reverse: wird jeweils 1x rückwärts (1,3,5,etc..) und dann vorwärts (2,4,6,etc...) abgespieltinitial: Setzt den Wert auf den Standardwert zurück.inherit: Erbt den Wert vom Elternelement.
#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); }}
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[Bearbeiten]
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: Endlosschleifeinitial: Setzt den Wert auf den Standardwert zurück.inherit: Erbt den Wert vom Elternelement
animation-fill-mode[Bearbeiten]
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 angezeigtbackwards: Das Element springt nach Beenden der Animation zum Anfangszustand zurückboth:
animation-play-state[Bearbeiten]
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[Bearbeiten]
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.
Details: caniuse.com
: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.
Siehe auch[Bearbeiten]
Weblinks[Bearbeiten]
- css-tricks: Keyframe Animation Syntax
- css-tricks: Starting Animations midway
- minimamente: magic animations
- creativebloq: animation with CSS3
- callmenick: Level Up Your CSS Animations with Cubic Bezier (21.04.2016)
Beispiele
- http://daneden.github.io/animate.css/
- ianlunn: Hover.css (A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.)
will-change
- http://dev.opera.com/articles/css-will-change-property/
- php-magazin: Hardware-Beschleunigung will-change
- MDN: will-change
#go-Buttons wird die Animationrennengestartet. Innerhalb von 3 Sekunden werden die Autos 780px nach rechts geschoben. In den Klassen werdenanimation-timing-functionverschiedene Werte zugewiesen.