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.

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.

Sintassi
 

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

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.

Sintassi

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

Esempio

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.

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

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