CSS-Animationen

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

CSS-Animationen

CSS ermöglicht die Animation von HTML-Elementen ohne Verwendung von JavaScript oder Flash!

CSS

In diesem Kapitel erfahren Sie mehr über die folgenden Eigenschaften:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Browserunterstützung für Animationen

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Property
@keyframes	43.0	10.0	16.0	9.0	30.0
animation-name	43.0	10.0	16.0	9.0	30.0
animation-duration	43.0	10.0	16.0	9.0	30.0
animation-delay	43.0	10.0	16.0	9.0	30.0
animation-iteration-count	43.0	10.0	16.0	9.0	30.0
animation-direction	43.0	10.0	16.0	9.0	30.0
animation-timing-function	43.0	10.0	16.0	9.0	30.0
animation-fill-mode	43.0	10.0	16.0	9.0	30.0
animation	43.0	10.0	16.0	9.0	30.0

Was sind CSS-Animationen?

Eine Animation lässt ein Element schrittweise von einem Stil zum anderen wechseln.

Sie können beliebig viele CSS-Eigenschaften und so oft ändern, wie Sie möchten.

Um CSS-Animationen verwenden zu können, müssen Sie zunächst einige Schlüsselbilder dafür angeben Animation.

Keyframes legen fest, welche Stile das Element zu bestimmten Zeiten haben wird.

Die @keyframes-Regel

Wenn Sie CSS-Stile innerhalb der @keyframes angeben In der Regel wechselt die Animation schrittweise vom aktuellen Stil zum neuen Stil zu bestimmten Zeiten.

Damit eine Animation funktioniert, müssen Sie die Animation an ein Element binden.

Das folgende Beispiel bindet die „example“-Animation an das <div>-Element. Die Animation dauert 4 Sekunden und ändert sich allmählich Hintergrundfarbe des <div>-Elements von „rot“ bis „gelb“:

Beispiel

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Hinweis: Die Eigenschaft animation-duration Definiert, wie lange die Fertigstellung einer Animation dauern soll. Wenn die Eigenschaft animation-duration nicht angegeben ist, Es wird keine Animation stattfinden, weil Der Standardwert ist 0s (0 Sekunden).

Im obigen Beispiel haben wir mit angegeben, wann sich der Stil ändern soll die Schlüsselwörter „von“ und „bis“ (die 0 % (Start) und 100 % (vollständig) darstellen).

Es ist auch möglich, Prozent zu verwenden. Durch die Verwendung von Prozent können Sie beliebig viele hinzufügen Der Stil ändert sich nach Ihren Wünschen.

Das folgende Beispiel ändert die Hintergrundfarbe des <div> Element, wenn die Animation zu 25 % abgeschlossen ist, zu 50 % abgeschlossen ist und erneut, wenn die Animation zu 100 % abgeschlossen ist:

Beispiel

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Das folgende Beispiel ändert sowohl die Hintergrundfarbe als auch die Position des <div> Element, wenn die Animation zu 25 % abgeschlossen ist, zu 50 % abgeschlossen ist und erneut, wenn die Animation zu 100 % abgeschlossen ist:

Beispiel

/* The animation code */
@keyframes example
{
  0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Eine Animation verzögern

Die Eigenschaft animation-delay gibt eine Verzögerung für den Start einer Animation an.

Im folgenden Beispiel kommt es zu einer Verzögerung von 2 Sekunden, bevor die Animation startet:

Beispiel

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
    
animation-duration: 4s;
  animation-delay: 2s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

Auch negative Werte sind zulässig. Bei Verwendung negativer Werte die Animation startet, als ob es bereits N Sekunden lang abgespielt hätte.

Im folgenden Beispiel startet die Animation so, als ob sie bereits stattgefunden hätte 2 Sekunden lang abspielen:

Beispiel

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-delay: -2s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

Legen Sie fest, wie oft eine Animation ausgeführt werden soll

Die Eigenschaft animation-iteration-count gibt an, wie oft eine Animation ausgeführt werden soll.

Im folgenden Beispiel wird die Animation dreimal ausgeführt, bevor sie stoppt:

Beispiel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

Im folgenden Beispiel wird der Wert „infinite“ verwendet, um die Animation zu erstellen mach weiter für immer:

Beispiel

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
    animation-iteration-count: 
infinite;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

Führen Sie die Animation in umgekehrter Richtung oder in alternativen Zyklen aus

Die Eigenschaft animation-direction gibt an ob eine Animation vorwärts, rückwärts oder im Wechsel abgespielt werden soll Fahrräder.

Die Eigenschaft „animation-direction“ kann die folgenden Werte haben:

normal: - Die Animation wird ganz normal abgespielt (vorwärts). Dies ist die Standardeinstellung
reverse: - Die Animation wird in umgekehrter Richtung (rückwärts) abgespielt.
alternate: - Die Animation wird zuerst vorwärts und dann rückwärts abgespielt
alternate-reverse: - Die Animation wird zuerst rückwärts und dann vorwärts abgespielt

Im folgenden Beispiel wird die Animation in umgekehrter Richtung (rückwärts) ausgeführt:

Beispiel

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-direction: 
reverse;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

Im folgenden Beispiel wird der Wert „alternate“ verwendet, um die Animation zu erstellen Erst vorwärts laufen, dann rückwärts:

Beispiel

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

Im folgenden Beispiel wird der Wert „alternate-reverse“ verwendet, um die Animation zu erstellen Erst rückwärts laufen, dann vorwärts:

Beispiel

div {
  width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate-reverse;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

Geben Sie die Geschwindigkeitskurve der Animation an

Die Eigenschaft animation-timing-function gibt die Geschwindigkeitskurve der an Animation.

Die Eigenschaft „animation-timing-function“ kann die folgenden Werte haben:

ease: - Gibt eine Animation mit einem langsamen Start, dann einem schnellen und einem langsamen Ende an (dies ist die Standardeinstellung).
linear: - Gibt eine Animation mit der gleichen Geschwindigkeit von Anfang bis Ende an
ease-in: - Gibt eine Animation mit langsamem Start an
ease-out: - Gibt eine Animation mit langsamem Ende an
ease-in-out: - Gibt eine Animation mit langsamem Start und Ende an
cubic-bezier(n,n,n,n): - Ermöglicht die Definition eigener Werte in einer Kubik-Bezier-Funktion

Das folgende Beispiel zeigt einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:

Beispiel

#div1 {animation-timing-function: linear;}
#div2 
{animation-timing-function: ease;}
#div3 {animation-timing-function: 
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 
{animation-timing-function: ease-in-out;}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Geben Sie den Füllmodus für eine Animation an

CSS-Animationen wirken sich nicht auf ein Element aus, bevor der erste Keyframe abgespielt wird oder nachdem der letzte Keyframe abgespielt wurde. Die Eigenschaft „animation-fill-mode“ kann überschreiben Sie dieses Verhalten.

Die Eigenschaft animation-fill-mode gibt a an Stil für das Zielelement, wenn die Animation nicht abgespielt wird (davor). beginnt, nachdem es endet, oder beides).

Die Eigenschaft „animation-fill-mode“ kann die folgenden Werte haben:

none: - Standardwert. Die Animation wendet vor oder nach der Ausführung keine Stile auf das Element an
forwards: - Das Element behält die Stilwerte bei, die durch den letzten Keyframe festgelegt wurden (abhängig von der Animationsrichtung und der Anzahl der Animationsiterationen).
backwards: - Das Element erhält die Stilwerte, die durch den ersten Keyframe festgelegt wurden (abhängig von der Animationsrichtung), und behält diese während der Animationsverzögerungszeit bei
both: - Die Animation folgt den Regeln für Vorwärts- und Rückwärtsbewegungen und erweitert die Animationseigenschaften in beide Richtungen

Im folgenden Beispiel behält das <div>-Element die Stilwerte von bei Letzter Keyframe, wenn die Animation endet:

Beispiel

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Im folgenden Beispiel kann das <div>-Element die von der festgelegten Stilwerte abrufen erster Keyframe vor Beginn der Animation (während der Animationsverzögerungszeit):

Beispiel

 div {
  width: 100px;
  height: 100px;
  
  background: red;
  position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: backwards;
  }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

Im folgenden Beispiel erhält das <div>-Element die festgelegten Stilwerte um den ersten Keyframe, bevor die Animation beginnt, und behalten Sie die Stilwerte bei ab dem letzten Keyframe, wenn die Animation endet:

Beispiel

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Kurzschrifteigenschaft für Animationen

Das folgende Beispiel verwendet sechs der Animationseigenschaften:

Beispiel

div
{	animation-name: example;
   
animation-duration: 5s;
   
animation-timing-function: linear;
   
animation-delay: 2s;
   
animation-iteration-count: infinite;
   
animation-direction: alternate;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

Der gleiche Animationseffekt wie oben kann durch die Verwendung der Kurzschrift erzielt werden animation-Eigenschaft:

Beispiel

div
{
    animation: example 5s linear 2s infinite alternate;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

CSS-Animationseigenschaften

In der folgenden Tabelle sind die @keyframes-Regel und alle CSS-Animationseigenschaften aufgeführt:

@keyframes: Gibt den Animationscode an
animation: Eine Abkürzungseigenschaft zum Festlegen aller Animationseigenschaften
animation-delay: Gibt eine Verzögerung für den Start einer Animation an
animation-direction: Gibt an, ob eine Animation vorwärts, rückwärts oder abgespielt werden soll in abwechselnden Zyklen
animation-duration: Gibt an, wie lange es dauern soll, bis eine Animation einen Zyklus abgeschlossen hat
animation-fill-mode: Gibt einen Stil für das Element an, wenn die Animation nicht abgespielt wird (bevor es beginnt, nachdem es endet oder beides)
animation-iteration-count: Gibt an, wie oft eine Animation abgespielt werden soll
animation-name: Gibt den Namen der @keyframes-Animation an
animation-play-state: Gibt an, ob die Animation ausgeführt oder angehalten wird
animation-timing-function: Gibt die Geschwindigkeitskurve der Animation an