La propriété transition permet de définir une transition entre deux états d'un élément.

Pour déclarer une transition, on utilise le code suivant :

.element {
    background-color: rgb(110, 190, 255); /* un exemple pour son état de base */
    transition: [durée] [fonction de timing] [délai];
}

.element:hover { /* l'état de survol */
    background-color: rgb(110, 190, 255); /* un exemple pour son état de survol */
}

On peut aussi l'utiliser pour d'autres états :

• :focus pour les éléments focusables
• :active pour les éléments actifs
• :visited pour les liens visités
• :checked pour les éléments cochés

Pour les fonctions de timing, on peut utiliser :

• ease (par défaut)
• linear
• ease-in
• ease-out
• ease-in-out

Le delai et la durée sont exprimés en secondes (s) ou millisecondes (ms).

transition: 0.5s;

transition: 3s 1s;

Pour changer la vitesse

transition: 3s ease-out;
transition: 3s ease-in;
transition: 3s linear;
transition: 2s steps(4, end);

transition: background-color 5s steps(4, end),
            width 3s 2s linear,
            text-shadow 2s;

.direction {
    background: tan;
    transition: 3s;
}

.direction:hover {
    background: teal;
    transition: .5s;
}

Exemple :