Die Eigenschaft animation wird verwendet, um die CSS-Eigenschaften mit diskreten Werten zu animieren (schrittweise von einem Stil zum anderen wechseln): Layout-Eigenschaften (border, height, width usw.) Eigenschaften, die die Position definieren (left, top), Schriftgrößen, Farben und Opazität.
@keyframes at-rule
Um die Animation zu verwenden, müssen Sie zunächst festlegen, was zu bestimmten Zeitpunkten während der Animation passieren soll. Das wird mit dem @keyframes at-rule definiert.
Die Regel @keyframes besteht aus einem Schlüsselwort “@keyframes”, gefolgt von einem Animationsnamen, der die Animation identifiziert. Die Animation wird dann auf ein Element angewendet, indem dieser Bezeichner als Wert für die Eigenschaft animation-name verwendet wird.
In geschweiften Klammern platzieren wir Keyframe-Selektoren, die Keyframes (oder Wegpunkte) in der Animationssequenz definieren, wann die Styles geändert werden sollen. Der Keyframe-Selektor kann mit einem Prozentsatz (%) oder mit den Schlüsselwörtern “from” (entspricht 0%) und “to” (entspricht 100%). 0% ist ein Startpunkt der Animation; 100% ist der Endpunkt; 100% iist der Endpunkt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 4s infinite;
}
@keyframes pulse {
0% { background-color: #8ebf42; }
50% { background-color: #1c87c9; }
100% { background-color: #d5dce8; }
}
</style>
</head>
<body>
<div class="element">Der Hintergrund dieses Textes wird mithilfe der CSS3-Eigenschaft animation animiert. </div>
</body>
</html>In diesem Beispiel verbinden wir die Animation mit dem Element <div>. Die Animation dauert 4 Sekunden und ändert schrittweise die Hintergrundfarbe des Elements <div> von "grün" zu "grau".
Die Eigenschaft animation-related
Animation ist die stenografische Eigenschaft, mit der alle Animationseigenschaften in einer einzigen Deklaration festgelegt werden können. Unten finden Sie alle üblichen Eigenschaften von animation-related.
animation-name
Diese Eigenschaft definiert den Namen von @keyframes-Regel, die Sie anwenden möchten.
animation-name: keyframe-name | none | initial | inheritanimation-duration
Es definiert die Zeitspanne (in Sekunden oder Millisekunden), die eine Animation benötigt, um einen Zyklus der Animation abzuschließen.
animation-duration: time | initial | inheritanimation-timing-function
Diese Eigenschaft legt fest, wie die Animation über die Dauer jedes Zyklus verläuft - nicht über die gesamte Animation.
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inheritEs kann folgende Werte annehmen:
- ease — (Standard) Die Animation beginnt langsam, wird dann schneller und endet langsam.
- ease-in — Die Animation hat einen langsamen Start, beschleunigt sich aber am Ende und stoppt abrupt.
- ease-out — Die Animation hat einen schnellen Start, verlangsamt sich aber am Ende.
- ease-in-out — Die Animation hat sowohl einen langsamen Start als auch ein langsames Ende.
- linear — Die Animation hat während der gesamten Animation die gleiche Geschwindigkeit; oft am besten geeignet für Farb- oder Opazitätsänderungen.
- cubic-bezier (n,n,n,n) - Es definiert Ihre eigenen Werte in der cubic-bezier Funktion. Mögliche Werte sind Zahlenwerte von 0 bis 1.
animation-delay
Diese Eigenschaft legt die Zeit (in Sekunden oder Millisekunden) zwischen dem zu ladenden Element und dem Start der Animation fest.
animation-delay: time | initial | inheritanimation-direction
Es definiert, ob die Animation bei wechselnden Zyklen rückwärts abgespielt werden soll oder nicht. Die Standardeinstellung wird bei jedem Zyklus zurückgesetzt.
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inheritDie folgenden Werte können verwendet werden:
- normal — (Standard) - Animation wird vorwärts abgespielt (keyframes 0% - 100%)
- reverse — die Animation wird rückwärts abgespielt (keyframes (100% - 0%)
- alternate — die Animation wird vorwärts abgespielt, dann rückwärts und wiederholt.
- alternate-reverse — die Animation wird rückwärts und vorwärts abgespielt.
animation-iteration-count
Es stellt ein, wie oft ein Animationszyklus vor dem Stoppen abgespielt werden soll. Der Standardwert ist eins, aber es kann jeder positive ganzzahlige Wert eingestellt werden. Wenn Sie das Schlüßelwort infinite einstellen, wird die Animation endlos abgespielt.
animation-iteration-count: number | infinite | initial | inheritanimation-fill-mode
Diese Eigenschaft legt einen Stil für das Element fest, das vor oder nach der Ausführung der Animation angewendet wird.
animation-fill-mode: none | forwards | backwards | both | initial | inheritEs kann die folgenden Werten haben:
- forwards -legt fest, dass das Element die Stilwerte des letzten Keyframes beibehalten soll (abhängig von den Eigenschaften animation-iteration-count und animation-direction).
- backwards - gibt an, dass das Element die vom ersten Keyframe gesetzten Style-Werte erhalten soll (hängt von animation-direction) und hält sie es innerhalb der Zeitspanne animation-delay.
- both - gibt an, dass die Animation den Regeln sowohl vorwärts als auch rückwärts folgen soll.
- none - (Standard) legt fest, dass keine Styles auf das Element angewendet werden, bevor oder nachdem die Animation ausgeführt wurde.
animation-play-state
Diese Eigenschaft gibt an, ob die Animation abgespielt oder angehalten wird.
animation-play-state: paused | running | initial | inheritDer Standardwert ist running.
Lassen Sie uns nun die animationsbezogenen Eigenschaften in Aktion sehen.
Beispiel
@keyframes pulse {
/* declare animation actions here */
}
.element {
animation-name: pulse;
animation-duration: 3.5s;
animation-timing-function: ease-in;
animation-delay: 1s
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
The same can be declared using animation shorthand property
*/
.element {
animation:
pulse
3.5s
ease-in
1s
alternate
infinite
none
running;
}Multiple Animations
Es ist möglich, mehrere Animationen auf einem Selektor zu deklarieren, man muss nur die Werte durch Kommas trennen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: pulse 5s ease infinite alternate,
nudge 5s linear infinite alternate;
}
@keyframes pulse {
0%, 100% { background-color: #8ebf42; }
50% { background-color: #1c87c9; }
}
@keyframes nudge {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(150px, 0); }
80% { transform: translate(-150px, 0); }
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Browser-Support
|
|
|
|
|---|---|---|---|
|
43.0+ 4.0-42.0 -webkit- |
16.0+ 5.0-15.0 -moz- |
9.0+ 5.1-8.0 -webkit- |
12.0+ 15.0-29.0 -webkit- |
Übe dein Wissen
