CSS transition-timing-function-Eigenschaft
Die CSS-Eigenschaft transition-timing-function gibt die Geschwindigkeitskurve einer Transition über deren Dauer an.
Die Eigenschaft transition-timing-function ist eine der CSS3-Eigenschaften.
Sie hat folgende Werte:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
| Anfangswert | ease |
|---|---|
| Gilt für | Alle Elemente, ::before und ::after Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.transitionTimingFunction = "ease"; |
Syntax
CSS transition-timing-function-Werte
css
transition-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 transition-timing-function:
CSS transition-timing-function-Codebeispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
padding: 2em;
width: 40px;
height: 40px;
left: 0;
background-color: #666;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
/* first value corresponds to the first transition-property value, and the second value corresponds to the second */
}
.example:hover .box {
left: 450px;
background-color: #ccc;
}
</style>
</head>
<body>
<h2>Transition-timing-function property example</h2>
<p>Hover over the element to see the effect</p>
<div class="example">
<div class="box"></div>
</div>
</body>
</html>Beispiel für transition-timing-function mit den Werten „ease“, „linear“, „ease-in“ und „ease-out“:
CSS transition-timing-function-Werte-Codebeispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-timing-function: ease;
}
.el2 {
transition-timing-function: linear;
}
.el3 {
transition-timing-function: ease-in;
}
.el4 {
transition-timing-function: ease-out;
}
</style>
</head>
<body>
<h2>Transition-timing-function property example</h2>
<div class="container">
<p>
<code>transition-timing-function: ease;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-timing-function: linear;</code>
</p>
<div class="example el2"></div>
<p>
<code>transition-timing-function: ease-in;</code>
</p>
<div class="example el3"></div>
<p>
<code>transition-timing-function: ease-out;</code>
</p>
<div class="example el4"></div>
</div>
</body>
</html>Beispiel für transition-timing-function mit den Werten „step-start“ und „step-end“:
Ein weiteres CSS transition-timing-function-Beispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 2em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
border-radius: 50%;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-timing-function: step-start;
}
.el2 {
transition-timing-function: step-end;
}
</style>
</head>
<body>
<h2> Transition-timing-function property example</h2>
<div class="container">
<p>
<code>transition-timing-function: step-start;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-timing-function: step-end;</code>
</p>
<div class="example el2"></div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| ease | Der Transition-Effekt beginnt langsam, wird dann schneller und endet langsam. Dies ist der Standardwert. |
| linear | Der Transition-Effekt verläuft mit konstanter Geschwindigkeit vom Start bis zum Ende. |
| ease-in | Der Transition-Effekt beginnt langsam und beschleunigt zum Ende hin. |
| ease-out | Der Transition-Effekt beginnt schnell, verlangsamt sich aber am Ende. |
| ease-in-out | Der Transition-Effekt beginnt langsam und endet langsam. |
| step-start | Entspricht steps(1, start). |
| step-end | Entspricht steps(1, end). |
| steps(int,start|end) | Gibt eine Sprungfunktion 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 Wertänderung innerhalb des Intervalls stattfindet. Wenn der zweite Parameter nicht angegeben wird, wird der Wert „end“ verwendet. |
| cubic-bezier (n,n,n,n) | Gibt eine kubische Bézier-Kurve an, um die Beschleunigung und Verzögerung der Transition zu definieren. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Die CSS-Eigenschaft transition-timing-function hat folgende Werte, außer