Insieme all'introduzione di CSS3 nascono molte nuove funzionalità che sono disponibili per la creazione di grandi effetti; uno dei più utili è la proprietà di transizione .
La proprietà di transizione è un nuovo sviluppo importante nei CSS. Può essere usato per creare un effetto di cambiamento dinamico su un div o classe usando una struttura semplice:
transition: property duration timing-function delay;La transizione di CSS3 è un ottimo modo per aggiungere una piccola animazione ai siti senza il sovraccarico di una libreria JavaScript come jQuery.
Prima di iniziare, puoi vedere una demo qui di la proprietà di transizione in azione .
Innanzitutto, affinché la proprietà di transizione funzioni, è necessario definire la proprietà standard a cui verrà applicata. Probabilmente le due proprietà più comuni che verranno definite sono larghezza e altezza. Per scrivere la proprietà standalone usa semplicemente:
transition-property: define propertySuccessivamente, una volta definita la proprietà, è necessario assegnare i valori iniziale e finale. Nel caso di valori come larghezza o altezza, la proprietà deve essere impostata con un valore iniziale e quindi un valore finale con qualche altra condizione.
Ad esempio, qui impostiamo la proprietà di transizione in larghezza, quindi il valore iniziale di larghezza e quindi impostiamo il valore finale quando l'elemento è al passaggio del mouse sopra:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Ora che abbiamo definito la proprietà da trasformare, i valori di inizio e fine, dobbiamo definire la durata della transizione. Ciò si ottiene definendo una lunghezza in secondi o in millisecondi come segue:
transition-duration: duration;Costruendo questo nell'esempio viene creato il seguente codice:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Ciò significa che il div mainheader si espanderà di 25px per una durata di 5 secondi.
Il codice è sufficiente per creare un buon effetto, tuttavia possiamo utilizzare ulteriormente la proprietà di transizione CSS3 utilizzando la funzione di temporizzazione. Usando questa proprietà è possibile modificare la curva di velocità della durata della transizione. La proprietà di transizione è impostata su una curva lineare per impostazione predefinita. Tuttavia, è possibile definire facilità, facilità, facilità, facilità di apertura e persino cubico bezier per modificare la curva di velocità. Cubic-bezier ti permette di definire i tuoi valori usando (n, n, n, n) dove n può essere tra 0 e 1 (per esempio lineare sarebbe (0,0,1,1)).
L'aggiunta di questo codice al nostro esempio si traduce in:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Inoltre, proprio come la durata della transizione, l'uso della proprietà delay-delay definisce una pausa prima che inizi l'effetto di transizione:
transition-delay: time;Infine, è importante considerare due cose quando si utilizza la proprietà di transizione CSS3. Innanzitutto, la maggior parte dei browser attualmente in circolazione richiede un prefisso del browser per utilizzarlo (le eccezioni sono IE10, Opera e Firefox16 +):
-moz-transition: per Firefox 15
-webkit-transition: per Chrome e Safari
(Ricorda che IE9 e versioni precedenti non supportano affatto la proprietà di transizione).
In secondo luogo, anche se ho usato una mano lunga negli esempi sopra per chiarezza, è considerata una buona pratica scrivere in forma abbreviata, come segue:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Usa la proprietà di transizione di CSS3? Come si confronta alle interpolazioni basate su jQuery? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di movimento via Shutterstock.