English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Effets de transition à différentes vitesses de début à la fin :
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程 de base(oldtoolbag.com)</title>
<style>
div {
width: 100px;
hauteur: 100px;
background: rouge;
transition: largeur 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<h1>cubic-Fonction bezier()/h1>
<p>Mouvez le curseur sur l'élément div pour voir l'effet.</p>
<div></div>
<p><b>Remarque :/b>Internet Explorer 9 et les navigateurs plus anciens ne prennent pas en charge cet effet.</p>
</body>
</html>Testez pour voir ‹/›cubic-La fonction bezier() définit une courbe de Bézier (Cubic Bezier).
La courbe de Bézier de quatre points P0, P1，P2 et P3 Définition. P0 et P3 est le point de départ et d'arrivée de la courbe. P0 est (0,0) et représente le temps initial et l'état initial, P3est (1,1）et représente le temps final et l'état final.
De l'image ci-dessus, nous devons savoir que cubic-La gamme de valeurs de bezier:
P0：Valeur par défaut (0, 0) P1：Valeur dynamique (x1, y1) P2：Valeur dynamique (x2, y2) P3：Valeur par défaut (1, 1)
Nous devons nous concentrer sur P1 et P2 deux points, et l'intervalle de valeurs de l'axe des abscisses est de 0 à 1，lorsque la valeur dépasse la gamme cubic-bezier sera inefficace; l'intervalle de valeurs de l'axe des ordonnées n'est pas spécifié, bien sûr, n'a pas besoin d'être trop grand.
La compréhension la plus directe est que, mettez une ligne droite dans la gamme seulement 1 de l'axe des coordonnées, et tirez deux points du milieu (l'intervalle de valeurs de l'axe des abscisses est [0, 1]，Y axis indéfini), la courbe formée est la courbe de vitesse de l'animation.
cubic-bezier() peut être utilisé pour animation-timing-function et transition-timing-function Attribut.
Version prise en charge : CSS3
Les nombres dans le tableau représentent la version du navigateur la première à prendre en charge cette fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
cubic-bezier(x1,y1,x2,y2)
| Valeur | Description |
|---|---|
| x1,y1,x2,y2 | Est obligatoire. Valeur numérique, x1 et x2 Doit être de 0 à 1 du nombre. |