Transitions

Les transitions permettent, en utilisant simplement du code CSS, de changer la valeur d’une propriété de manière douce, pendant une durée déterminée.

Pour ce faire, le langage CSS met à disposition 5 propriétés :

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Compatibilité avec les différents navigateurs internet

Voici le tableau résumant la compatibilité des propriétés de transition, en fonction du navigateur internet :

Utiliser les transitions CSS

Pour utiliser les transitions CSS, il faut spécifier 2 choses :

• La propriété sur laquelle la transition doit s’appliquer
• La durée de la transition

Remarque : Si aucune valeur n’est définie pour la durée, celle-ci n’aura pas d’effet, car la valeur attribuée par défaut est 0.

Exemple :

div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s; /* La transition concerne la largeur de la div et prend 2 secondes */
}

div:hover {
    width: 300px; /* Au passage de la souris sur la div, la largeur s'étends à 300 pixels */
}

Remarque : Dans l’exemple ci-dessus, lorsque la souris ne survole plus la <div>, celle-ci reprend progressivement sa taille originelle.

Ajouter une transition sur plusieurs propriétés