English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Effetti di transizione a diverse velocità da inizio a fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di Base(oldtoolbag.com)</title>
<style>
div{
larghezza:100px;
altezza:100px;
sfondo:red;
trasmissione:larghezza 2s;
funzione-di-tempo-di-trasizione:cubic-bezier(0.1,0.7,1.0,0.1);
}
div:hover{
larghezza:300px;
}
</style>
</head>
<body>
<h1>Funzione cubic-bezier()</h1>
<p>Muovi il mouse sull'elemento div per vedere l'effetto.</p>
<div></div>
<p><b>Attenzione:</b> Internet Explorer 9 e le versioni precedenti non supportano questo effetto.</p>
</body>
</html>Prova a vedere ‹/›La funzione cubic-bezier() definisce una curva di Bézier (Cubic Bezier).
La curva di Bézier è definita da quattro punti P0, P1, P2 e P3. P0 e P3 sono il punto di partenza e di arrivo della curva. P0 è (0,0) e rappresenta il tempo iniziale e lo stato iniziale, P3 è (1,1) e rappresenta il tempo finale e lo stato finale.
Dalla figura di sopra dobbiamo sapere che l'intervallo di valore di cubic-bezier è:
P0: valore predefinito (0, 0) P1: valore dinamico (x1, y1) P2: valore dinamico (x2, y2) P3: valore predefinito (1, 1)
Ciò a cui dobbiamo prestare attenzione sono i valori dei punti P1 e P2, e l'intervallo di valori dell'asse X è 0 a 1, quando il valore supera l'intervallo cubic-bezier non funzionerà; il valore dell'asse Y non è specificato, ovviamente non deve essere troppo grande.
La comprensione più diretta è che sarà messa una linea retta in un'asse di intervallo solo di 1, e due punti saranno tirati fuori dal centro per trascinare (l'intervallo di valori dell'asse X è [0, 1], l'asse Y è qualsiasi), e la curva formata alla fine sarà la curva di velocità dell'animazione.
cubic-bezier() può essere utilizzato animation-timing-function e transition-timing-function Proprietà.
Versione di supporto: CSS3
I numeri nella tabella rappresentano la versione del primo browser che supporta la funzione.
| Funzione | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
cubic-bezier(x1,y1,x2,y2)
| Valore | Descrizione |
|---|---|
| x1,y1,x2,y2 | Obbligatorio. Valore numerico, x1 e x2 devono essere numeri tra 0 e 1. |