animation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die animation
Shorthand- CSS- Eigenschaft wendet eine Animation zwischen Stilen an. Sie ist eine Kurzform für animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
, animation-play-state
und animation-timeline
.
Probieren Sie es aus
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;
/* two animations */
animation:
3s linear slide-in,
3s ease-out 5s slide-out;
Die animation
-Eigenschaft wird als eine oder mehrere einzelne Animationen angegeben, getrennt durch Kommas.
Jede einzelne Animation wird wie folgt spezifiziert:
-
null, eine oder zwei Vorkommen des
<time>
Wertes -
null oder ein Vorkommen der folgenden Werte:
-
ein optionaler Name für die Animation, der
none
, ein<custom-ident>
oder ein<string>
sein kann
Note:
animation-timeline
,animation-range-start
undanimation-range-end
sind derzeit nicht in dieser Liste enthalten, da aktuelle Implementierungen nur zurückgesetzt werden können. Das bedeutet, dass das Einschließen vonanimation
einen zuvor deklariertenanimation-timeline
Wert aufauto
und zuvor deklarierteanimation-range-start
undanimation-range-end
Werte aufnormal
zurücksetzt, aber diese Eigenschaften können nicht überanimation
gesetzt werden. Wenn Sie scroll-gesteuerte CSS-Animationen erstellen, müssen Sie diese Eigenschaften nach der Deklaration eineranimation
-Kurzform deklarieren, damit sie wirksam wird.
Werte
<single-easing-function>
-
Bestimmt die Art des Übergangs. Der Wert muss einer der in
<easing-function>
verfügbaren sein. <single-animation-iteration-count>
-
Die Anzahl der Durchläufe der Animation. Der Wert muss einer der in
animation-iteration-count
verfügbaren sein. <single-animation-direction>
-
Die Richtung, in die die Animation abgespielt wird. Der Wert muss einer der in
animation-direction
verfügbaren sein. <single-animation-fill-mode>
-
Bestimmt, wie Stile vor und nach der Ausführung auf das Ziel der Animation angewendet werden sollen. Der Wert muss einer der in
animation-fill-mode
verfügbaren sein. <single-animation-play-state>
-
Bestimmt, ob die Animation abgespielt wird oder nicht. Der Wert muss einer der in
animation-play-state
verfügbaren sein.
Beschreibung
Die Reihenfolge der Zeitwerte innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert, der als <time>
analysiert werden kann, wird dem animation-duration
zugewiesen, und der zweite dem animation-delay
.
Die Reihenfolge der anderen Werte innerhalb jeder Animationsdefinition ist ebenfalls wichtig, um einen animation-name
Wert von anderen Werten zu unterscheiden. Wenn ein Wert in der animation
-Kurzform als Wert für eine Animations-Eigenschaft außer animation-name
analysiert werden kann, wird der Wert zuerst auf diese Eigenschaft und nicht auf animation-name
angewendet. Aus diesem Grund wird empfohlen, den Wert für animation-name
als letzten Wert in einer Liste von Werten anzugeben, wenn Sie die animation
-Kurzform verwenden; dies gilt auch, wenn Sie mehrere, durch Kommas getrennte Animationen mit der animation
-Kurzform angeben.
Obwohl ein Animationsname festgelegt werden muss, damit eine Animation angewendet wird, sind alle Werte der animation
-Kurzform optional und standardmäßig auf den Anfangswert für jede Langform animation
-Komponente. Der Anfangswert von animation-name
ist none
, was bedeutet, dass, wenn kein animation-name
Wert in der animation
-Kurzform-Eigenschaft deklariert wird, keine Animation auf eine der Eigenschaften angewendet wird.
Wenn der animation-duration
Wert in der animation
-Kurzform-Eigenschaft weggelassen wird, wird der Wert für diese Eigenschaft auf 0s
standardisiert. In diesem Fall wird die Animation dennoch erfolgen (die animationStart
und animationEnd
Ereignisse werden ausgelöst), aber keine Animation wird sichtbar sein.
Im Falle des animation-fill-mode
forwards Wertes verhalten sich animierte Eigenschaften so, als ob sie in einem gesetzten will-change
Eigenschaftswert enthalten wären. Wenn während der Animation ein neuer Stapelkontext erstellt wird, behält das Ziel-Element den Stapelkontext nach dem Abschluss der Animation bei.
Barrierefreiheit
Blinkende und aufflackernde Animationen können problematisch für Menschen mit kognitiven Anliegen wie Aufmerksamkeitsdefizit-/Hyperaktivitätsstörung (ADHS) sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie und Migräne sowie fototoxische Empfindlichkeit sein.
Überlegen Sie, eine Möglichkeit zum Anhalten oder Deaktivieren von Animationen bereitzustellen sowie die Reduced Motion Media Query zu verwenden, um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz für reduzierte Animationen geäußert haben.
- Designing Safer Web Animation For Motion Sensitivity · Ein Artikel von A List Apart
- Eine Einführung in die Reduced Motion Media Query | CSS-Tricks
- Responsive Design für Bewegungen | WebKit
- MDN Understanding WCAG, Leitfaden 2.2 Erklärungen
- Verstehen des Erfolgskriteriums 2.2.2 | W3C Understanding WCAG 2.0
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | Not animatable |
Formale Syntax
animation =
<single-animation>#
<single-animation> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Beispiele
Hinweis: Die Animation von CSS Box Model Eigenschaften wird nicht empfohlen. Das Animieren einer Box-Model-Eigenschaft ist von Natur aus CPU-intensiv; überlegen Sie, stattdessen die transform Eigenschaft zu animieren.
Sonnenaufgang
Hier animieren wir eine gelbe Sonne über einen hellblauen Himmel. Die Sonne erhebt sich zur Mitte der Ansicht und fällt dann aus dem Blickfeld.
<div class="sun"></div>
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
Mehrere Eigenschaften animieren
Aufbauend auf die Sonnenanimation im vorherigen Beispiel fügen wir eine zweite Animation hinzu, die die Farbe der Sonne beim Auf- und Untergang ändert. Die Sonne beginnt dunkelrot, wenn sie unter dem Horizont ist, und wechselt zu einem hellen Orange, wenn sie den höchsten Punkt erreicht.
<div class="sun"></div>
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate animating-multiple-properties;
}
/* it is possible to animate multiple properties in a single animation */
@keyframes animating-multiple-properties {
from {
transform: translateY(110vh);
background-color: red;
filter: brightness(75%);
}
to {
transform: translateY(0);
background-color: orange;
/* unset properties i.e. 'filter' will revert to default values */
}
}
Mehrere Animationen anwenden
Hier ist eine Sonne, die auf einem hellblauen Hintergrund auf- und untergeht. Die Sonne rotiert allmählich durch ein Regenbogenspektrum. Die Timing von Position und Farbe der Sonne sind unabhängig.
<div class="sun"></div>
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/* multiple animations are separated by commas, each animation's parameters are set independently */
animation:
4s linear 0s infinite alternate rise,
24s linear 0s infinite psychedelic;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes psychedelic {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
Überlappende mehrere Animationen
Hier ist eine gelbe Sonne auf einem hellblauen Hintergrund. Die Sonne prallt zwischen den linken und rechten Seiten des Ansichtsfensters. Die Sonne bleibt im Ansichtsfenster, obwohl eine Aufstiegsanimation definiert ist. Die Transform-Eigenschaft der Aufstiegsanimation wird von der Bounce-Animation 'überschrieben'.
<div class="sun"></div>
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/*
animations declared later in the cascade will override the
properties of previously declared animations
*/
/* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
animation:
4s linear 0s infinite alternate rise,
4s linear 0s infinite alternate bounce;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes bounce {
from {
transform: translateX(-50vw);
}
to {
transform: translateX(50vw);
}
}
Weitere Beispiele finden Sie unter CSS-Animationen verwenden.
Spezifikationen
Specification |
---|
CSS Animations Level 1 # animation |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS-Animationen verwenden
- JavaScript
AnimationEvent
API