English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Different transition effects from start to end at different speeds:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>cubic-bezier() Funktion</h1>
<p>bewegen Sie den Mauszeiger auf das div-Element, um den Effekt zu sehen.</p>
<div></div>
<p><b>Hinweis:</b> Internet Explorer 9 und ältere Versionen der Browser unterstützen diesen Effekt nicht.</p>
</body>
</html>Testen Sie es heraus ‹/›cubic-bezier() Funktion definiert eine Bezier-Kurve (Cubic Bezier).
Die Bezier-Kurve besteht aus vier Punkten P0，P1，P2 und P3 Definition. P0 und P3 ist der Anfang und das Ende der Kurve. P0 ist（0,0）und stellt die Anfangszeit und den Anfangszustand dar，P3ist（1,1）und stellt die endgültige Zeit und den endgültigen Zustand dar.
Von dem obigen Bild müssen wir wissen, dass cubic-bezier Wertebereich:
P0：Standardwert (0, 0) P1：Dynamischer Wert (x1, y1) P2：Dynamischer Wert (x2, y2) P3：Standardwert (1, 1)
Wir müssen uns auf P1 und P2 Zwischenwerte der beiden Punkte, und der Wertebereich der X-Achse ist 0 bis 1， wenn der Wert aus dem Bereich herausgeht cubic-bezier wird inaktiv；Der Wert der Y-Achse ist nicht angegeben, natürlich auch nicht zu groß.
Die direkteste Verständnis ist, dass eine Gerade in einem Bereich nur 1 in den Koordinatenachsen und zwei Punkte aus dem Mittelpunkt herausziehen, um zu ziehen（X-Achsenwertebereich ist [0, 1]，Y-Achse beliebig），und die形成的曲线就是动画的速度曲线。
cubic-bezier() kann verwendet werden animation-timing-function und transition-timing-function Eigenschaft.
Unterstützte Versionen: CSS3
Die Zahlen in der Tabelle stellen die erste Browserversion dar, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
cubic-bezier(x1,y1,x2,y2)
| Wert | Beschreibung |
|---|---|
| x1,y1,x2,y2 | notwendig. Numerischer Wert, x1 und x2 muss zwischen 0 und 1 der Zahl. |