Transizioni nei CSS3

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.

Creare cambiamenti fluidi di proprietà di elementi con transition.

1. Nome della proprietà transition-property

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

div {
width: 100px;
-webkit-transition-property: width;
transition-property: width;
}
div:hover {
width: 300px;
}

2. La durata della transizione transition-duration

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
 

div {
-webkit-transition-duration: 5s;
transition-duration: 5s;
}

Esempio

Spostarsi sul cerchio

transition-duration
0.5s
1s
2s
.

3. Funzione di transizione transition-timing-function

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

div {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}

Esempio

Far partire Reset
transition-timing-function

linear

ease

ease-in

ease-out

ease-in-out

cubic-bezier

4. Ritardo di transizione transition-delay.

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.

Sintassi
div {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}

Spostarsi sul blocco

transition-delay
0s
0.5s
1s

5. Scrittura abbreviata della transitione

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

{transition: transition-property transition-duration transition-timing-function transition-delay;}

E se utilizzeremo tutti I valori come sono da default e dobbiamo solo indicare il tempo della transizione avremo

div {transition: 1s;}

il ciò significa nel codice esteso

div {transition: all 1s ease 0s;}

6. Transizione morbida di più proprietà

Per un elemento è possibile specificare più passaggi in sequenza, separati da virgole. Ad ogni transizione possiamo indicare la sua timing-function.

div {transition: background 0.3s ease, color 0.2s linear;}

oppure

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

7. Esempi di transizioni per varie proprietà.

Posizionare il cursore del mouse sul blocco per visualizzare le proprietà in azione.

CSS3 Transition examples (on :hover)

Text-shadow

border-color, border-radius, background-color
border-style, background-color
outline-color, outline-offset
width, height, box-shadow
position
opacity
background-position
background-size

 

Letto 816 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

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