CSS animation-timing-function-Eigenschaft
Die Eigenschaft animation-timing-function definiert, wie sich die Animation über die Dauer jedes Zyklus fortsetzt, nicht jedoch über die gesamte Animationsdauer. Sie gibt die Geschwindigkeitskurve der Animation an, die festlegt, wie lange es dauert, bis die Animation von einem Stylesatz in einen anderen wechselt.
Timing-Funktionen definieren die Interpolation zwischen den Keyframe-Stopps. Wenn für ein Intervall keine Timing-Funktion angegeben ist, wird der Wert animation-timing-function des Elements verwendet.
Die Eigenschaft animation-timing-function ist eine der CSS3-Eigenschaften.
Sie kann folgende Werte annehmen:
ease- (Standardwert) Startet langsam, wird dann schneller und endet langsam.ease-in- Startet langsam, beschleunigt aber am Ende.ease-out- Startet schnell, verlangsamt sich aber am Ende.ease-in-out- Startet langsam und endet langsam.step-start- Entsprichtsteps(1, start).step-end- Entsprichtsteps(1, end).linear- Die Animation hat während des gesamten Vorgangs die gleiche Geschwindigkeit, oft am besten geeignet für Farb- oder Opazitätsänderungen.steps(int, start|end)- Gibt eine Treppenfunktion mit zwei Parametern an. Der erste Parameter definiert die Anzahl der Intervalle in der Funktion. Er muss größer als 0 sein. Der zweite Parameter ist entweder der Wert „start“ oder „end“ und gibt den Punkt an, an dem die Änderung der Werte innerhalb des Intervalls stattfindet. Wenn der zweite Parameter weggelassen wird, wird „end“ verwendet.cubic-bezier(n,n,n,n)- Gibt benutzerdefinierte Werte für die cubic-bezier-Funktion an. Die ersten beiden Parameter definieren die X-Koordinaten und müssen zwischen 0 und 1 liegen. Die letzten beiden Parameter definieren die Y-Koordinaten und können jede beliebige Zahl sein.
Wenn mehrere durch Kommas getrennte Werte angegeben werden, werden sie in der Reihenfolge den entsprechenden Animationen zugeordnet, die in animation-name definiert sind. Wenn es weniger Timing-Funktionen als Animationen gibt, wird die Liste wiederholt, um die Anzahl auszugleichen.
| Anfangswert | ease |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::before und ::after Pseudo-Elemente. |
| Vererbbar | Nein |
| Animierbar | Nein |
| Version | CSS3 |
| DOM-Syntax | object.style.animationTimingFunction = "linear"; |
Syntax
Syntax der CSS-Eigenschaft animation-timing-function
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;Beispiel für die animation-timing-function-Eigenschaft mit dem Wert „ease“:
Beispiel für die CSS-Eigenschaft animation-timing-function mit dem Wert ease
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
animation: element 5s infinite;
animation-timing-function: ease;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>Beispiel für die animation-timing-function-Eigenschaft mit dem Wert „ease-in“:
Beispiel für die CSS-Eigenschaft animation-timing-function mit dem Wert ease-in
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #8ebf42;
position: relative;
animation: element 7s infinite;
animation-timing-function: ease-in;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-timing-function Property</h1>
<div></div>
</body>
</html>Beispiel für die animation-timing-function-Eigenschaft mit verschiedenen Timing-Funktionen:
Beispiel für die CSS-Eigenschaft animation-timing-function mit den Werten linear, ease, ease-in, ease-out und ease-in-out
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
color: #eee;
font-weight: bold;
position: relative;
text-align: center;
padding: 8px;
animation: mymove 5s infinite;
}
#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>
<h2>Animation-timing-function example</h2>
<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>Werte
| Wert | Beschreibung | Abspielen |
|---|---|---|
| ease | Die Animation startet langsam, wird dann schneller und endet langsam. Dies ist der Standardwert. | Abspielen » |
| linear | Läuft während der gesamten Animation mit konstanter Geschwindigkeit ab. | Abspielen » |
| ease-in | Die Animation startet langsam, wird aber am Ende schneller. | Abspielen » |
| ease-out | Die Animation startet schnell, verlangsamt sich aber am Ende. | Abspielen » |
| ease-in-out | Die Animation startet langsam und endet langsam. | Abspielen » |
| step-start | Entspricht steps(1, start). | |
| step-end | Entspricht steps(1, end). | |
| steps(int,start|end) | Gibt eine Treppenfunktion mit zwei Parametern an. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion an. Er muss größer als 0 sein. Der zweite Parameter ist entweder der Wert „start“ oder „end“ und gibt den Punkt an, an dem die Änderung der Werte innerhalb des Intervalls stattfindet. Wenn der zweite Parameter nicht angegeben wird, wird der Wert „end“ verwendet. | |
| cubic-bezier (n,n,n,n) | Definiert die Werte über die cubic-bezier-Funktion. Die ersten beiden Parameter sind X-Koordinaten (0 bis 1), und die letzten beiden sind Y-Koordinaten (können jede beliebige Zahl sein). | |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was gibt die CSS-Eigenschaft animation-timing-function an?