CSS Animationen

CSS Animationen

CSS kann Animationseffekte für HTML-Elemente ermöglichen, ohne JavaScript oder Flash zu verwenden!

CSS

In diesem Kapitel werden Sie lernen:

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

Browser-Unterstützung für Animationen

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

属性 Chrome IE Firefox Safari Opera
@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 ist CSS-Animation?

Die Animation lässt ein Element allmählich von einem Style in einen anderen Style übergehen.

Sie können jede beliebige Anzahl von CSS-Attributen ändern.

Um CSS-Animationen zu verwenden, müssen Sie zunächst einige Schlüsselbilder für die Animation spezifizieren.

Die Schlüsselbilder enthalten die Styles, die das Element zu einer bestimmten Zeit hat.

@keyframes-Regel

Wenn Sie in @keyframes Die Regeln spezifizieren den CSS-Style, und die Animation wird zu einer bestimmten Zeit allmählich vom aktuellen Style zum neuen Style wechseln.

Um die Animation生效，muss sie an ein Element gebunden werden.

Der folgende Beispiel bindet die "example"-Animation an das <div>-Element. Die Animation dauert 4 Sekunden und ändert die Hintergrundfarbe des <div>-Elements von "red" allmählich in "yellow":

实例

/* Animation-Code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Animationseffekt auf dieses Element anwenden */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Hinweis:animation-duration Das Attribut definiert, wie lange der Animation abgeschlossen werden soll. Wenn nicht angegeben animation-duration Wenn das Attribut nicht definiert ist, wird die Animation nicht ausgeführt, da der Standardwert 0s (0 Sekunden) ist.

In dem obigen Beispiel haben wir durch die Verwendung der Schlüsselwörter "from" und "to" (die 0% (Beginn) und 100% (Abgeschlossen) darstellen), festgelegt, wann der Stil geändert wird.

Sie können auch Prozentsatzwerte verwenden. Durch die Verwendung von Prozentsätzen können Sie so viele Stiländerungen hinzufügen, wie Sie möchten.

Der folgende Beispiel zeigt, wie die Hintergrundfarbe des <div>-Elements geändert wird, wenn die Animation 25%, 50% und 100% abgeschlossen ist:

实例

/* Animation-Code */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elemente, auf die die Animation angewendet wird */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Das folgende Beispiel ändert die Hintergrundfarbe und die Position des <div>-Elements, wenn die Animation 25%, 50% und 100% abgeschlossen hat:

实例

/* 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;}
}
/* Elemente, auf die die Animation angewendet wird */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Verzögerte Animation

animation-delay Das Attribut legt die Verzögerungszeit für den Start der Animation fest.

Das folgende Beispiel hat eine Verzögerung von 2 Sekunden vor dem Start der Animation:

实例

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

亲自试一试

Negative Werte sind ebenfalls erlaubt. Wenn negative Werte verwendet werden, beginnt die Animation, so als ob sie bereits N Sekunden abgespielt hätte.

Im folgenden Beispiel beginnt die Animation, so als ob sie bereits 2 Sekunden abgespielt hätte:

实例

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

亲自试一试

Die Anzahl der Ausführungen der Animation einstellen

animation-iteration-count Das Attribut legt fest, wie oft die Animation ausgeführt werden soll.

Das folgende Beispiel führt die Animation 3 Mal aus, bevor sie stoppt:

实例

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

亲自试一试

Der folgende Beispiel verwendet den Wert "infinite", um die Animation für immer fortzusetzen:

实例

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

亲自试一试

Rückwärts oder alternierend ausführende Animation

animation-direction Das Attribut legt fest, ob die Animation vorwärts, rückwärts oder alternierend abgespielt wird.

animation-direction Die Eigenschaft akzeptiert die folgenden Werte:

  • normal - Die Animation wird normal abgespielt (vorwärts). Standardwert
  • 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

Das folgende Beispiel führt die Animation in umgekehrter Richtung (rückwärts) aus:

实例

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

亲自试一试

Der folgende Beispiel verwendet den Wert "alternate", um die Animation zuerst vorwärts und dann rückwärts auszuführen:

实例

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

亲自试一试

Der folgende Beispiel verwendet den Wert "alternate-reverse", um die Animation zuerst rückwärts und dann vorwärts auszuführen:

实例

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

亲自试一试

Bestimmen Sie die Geschwindigkeitskurve der Animation

animation-timing-function Die Eigenschaft legt die Geschwindigkeitskurve der Animation fest.

animation-timing-function Die Eigenschaft akzeptiert die folgenden Werte:

  • ease - Bestimmen Sie eine Animation, die von langsam zu schnell und dann wieder langsamer wird (Standard)
  • linear - Bestimmen Sie eine Animation, deren Geschwindigkeit von Anfang bis Ende gleich bleibt
  • ease-in - Bestimmen Sie eine Animation, die langsamer beginnt
  • ease-out - Bestimmen Sie eine Animation, die langsamer endet
  • ease-in-out - Bestimmen Sie eine Animation, die langsamer beginnt und endet
  • cubic-bezier(n,n,n,n) - Definieren Sie Ihre eigenen Werte in der dreifachen Beziersfunktion

Die folgenden Beispiele zeigen einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:

实例

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

亲自试一试

Bestimmen Sie das Füllmuster der Animation

CSS-Animationen beeinflussen das Element nicht vor dem Abspielbeginn des ersten Schlüsselbildes oder nach dem Abspielende des letzten Schlüsselbildes.animation-fill-mode kann die Eigenschaft dieses Verhalten überdecken.

Wenn die Animation nicht abgespielt wird (vor dem Beginn, nach dem Ende oder am Ende beider),animation-fill-mode Die Eigenschaft legt die Stylwerte des Zielelements fest.

Die animation-fill-mode-Eigenschaft akzeptiert die folgenden Werte:

  • none - Standardwert. Die Animation wendet vor der Ausführung oder nach der Ausführung keine Stylwerte auf das Element an.
  • forwards - Das Element behält die Stylwerte bei, die vom letzten Schlüsselbild festgelegt wurden (abhängig von animation-direction und animation-iteration-count).
  • backwards - Das Element erhält die Stylwerte, die vom ersten Schlüsselbild festgelegt wurden (abhängig von animation-direction), und behält diesen Wert während der Verzögerung der Animation bei.
  • both - Die Animation folgt gleichzeitig den Regeln für vorwärts und rückwärts, um die Animationseigenschaften in beiden Richtungen zu erweitern.

Der folgende Beispiel zeigt, wie das <div>-Element am Ende der Animation die Stylwerte aus dem letzten Schlüsselbild beibehält:

实例

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

亲自试一试

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

实例

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

亲自试一试

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

实例

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

亲自试一试

动画简写属性

下例使用六种动画属性：

实例

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

亲自试一试

使用简写的 animation 属性也可以实现与上例相同的动画效果：

实例

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

亲自试一试

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性 描述
@keyframes 定义动画模式。
animation 设置所有动画属性的简写属性。
animation-delay 定义动画开始的延迟。
animation-direction 定义动画是向前播放、向后播放还是交替播放。
animation-duration 定义动画完成一个周期应花费的时间。
animation-fill-mode 定义元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count 定义动画应播放的次数。
animation-name 定义 @keyframes 动画的名称。
animation-play-state Definiert, ob die Animation läuft oder pausiert.
animation-timing-function Definiert die Geschwindigkeitskurve der Animation.