linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier
Transizioni nei CSS3 creano dei passaggi morbidi al momento di cambiamento di proprietà CSS da una ad altra. Il più comune uso è la trasformazione di collegamenti e di bottoni nello stato: hover o:focus. Permettono anche di controllare la velocità di cambiamento di proprietà dei CSS durante animazione.
Le transizioni vengono applicate a tutti gli elementi, nonché a pseudo elementi come : befor e: after. Per indicare tutte le impostazioni di transizione di solito si utilizza la scrittura abbreviata della proprietà trasition.
Esso contiene il nome della CSS-proprietà a cui verranno applicati effetti di transizione. Non si eredita.
transition-property | |
---|---|
Valore: | |
none | Assenza di proprietà per transizione. |
all | Il valore di default. Si applica un effetto di transizione a tutte le proprietà dell'elemento. |
proprieta | Identifica un elenco di css-proprietà, separati da virgole, che partecipano alla transizione. |
initial | Imposta il valore della proprietà al valore di default. |
inherit | Valore della proprietà è eredita dal elemento genitore. |
Sintassi
Specifica la lunghezza di tempo durante il quale verrà effettuata la transizione. Non si eredita.
transition-duration | |
---|---|
Valore: | |
tempo | Il tempo di transitione è indicato in secondi o millisecondi, per esempio, 2s o 5ms. |
initial | Imposta il valore della proprietà al valore di default. |
inherit | Valore della proprietà è eredita dal elemento genitore. |
Sintassi
La proprietà specifica la funzione di tempo, che determina la velocità della transizione del oggetto da un valore ad un altro. Se si definisce più di una transizione per un elemento, ad esempio, il colore e la sua posizione, è possibile utilizzare diverse funzioni per ogni proprietà. Non si eredita.
transition-timing-function | |
---|---|
Valore: | |
ease | La funzione predefinita, la transizione inizia lentamente, accelera e decelera rapidamente alla fine. Correspondence a cubic-bezier(0.25,0.1,0.25,1). |
linear | La transizione avviene in modo uniforme per tutto il tempo, senza cambiamenti di velocità. Corrisponde a cubic-bezier(0,0,1,1). |
ease-in | La transizione inizia lentamente e poi gradualmente accelerato alla fine. Corrisponde a cubic-bezier(0.42,0,1,1). |
ease-out | La transizione inizia rapidamente e rallenta alla fine. Corrisponde a cubic-bezier(0,0,0.58,1). |
ease-in-out | La transizione inizia lentamente e termina lentamente. Corrisponde cubic-bezier(0.42,0,0.58,1). |
cubic-bezier(x1, y1, x2, y2) | Consente di impostare manualmente valore da 0 a 1 per la curva di accelerazione. Su questo sito potrai costruire qualsiasi percorso di transizione. |
initial | Imposta il valore della proprietà al valore di default. |
inherit | Valore della proprietà è eredita dal elemento genitore. |
Sintassi
Esempio
linear ease ease-in ease-out ease-in-out cubic-bezier
Una proprieta opzionale permette di effettuare cambiamenti nelle proprietà non subito, ma con un certo ritardo. Non si eredita.
transition-delay | |
---|---|
Valore: | |
tempo | Il tempo di ritardo di transizione in secondi o millisecondi. |
initial | Imposta il valore della proprietà al valore di default. |
inherit | Valore della proprietà è eredita dal elemento genitore. |
Tutte le proprietà che sono responsabili per la modifica del'aspetto di un elemento possono essere scritte insieme nel codice, sotto una sola proprietà trasition
E se utilizzeremo tutti I valori come sono da default e dobbiamo solo indicare il tempo della transizione avremo
il ciò significa nel codice esteso
Per un elemento è possibile specificare più passaggi in sequenza, separati da virgole. Ad ogni transizione possiamo indicare la sua timing-function.
oppure
Posizionare il cursore del mouse sul blocco per visualizzare le proprietà in azione.
Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .
Scopri il corso