Attribut TRANSITION
Rôle
L’attribut transition permet de réaliser des transitions sur les changements de propriétés CSS. Le changement ne fera progressivement et non pas instantanément
Cet attribut est le raccourci de :
- transition-property qui spécifie un ou plusieurs attributs concernés par la transition,
- transition-duration qui spécifie la durée de la transition
- transition-timing-function qui spécifie la courbe de vitesse de la transition,
- transition-delay qui spécifie le délai à attendre avant la transition
L’attribut transition-duration doit être fourni, sinon la transition ne se fera pas : 0 seconde par défaut
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.transition
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
img{
transition: all 1s;
width: 200px;
height: 200px;
}
img:hover{
width: 230px;
height: 230px;
}
– Le code HTML
<img src="lorempixel.com/output/city-q-g-200-200-8.jpg" alt="">
Résultat
Survolez l’image et vous constaterez que le changement de dimension se fera progressivement sur 1 seconde.
Compatibilité
L’attribut transition est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)
Valeurs
Les différentes valeurs de l’attribut transition sont:
- transition-property
L’attribut concerné par la transition
- Voir transition-property
- transition-duration
La durée de la transition
- Voir transition-duration
- transition-timing-function
La courbe de vitesse de la transition
- Voir transition-timing-function
- transition-delay
L’attente avant le début de la transition
- Voir transition-delay
- initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
transition : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
transition : inherit
A voir aussi
transition-property– transition-delay– transition-duration– transition-timing-function
