Propriété de transition de style
Exemple
Survolez un élément div pour changer progressivement son apparence :
document.getElementById("myDIV").style.transition = "all 2s";
Définition et utilisation
La propriété de transition est une propriété abrégée pour les quatre propriétés de transition :
transitionProperty, transitionDuration, transitionTimingFunction et transitionDelay.
Remarque : spécifiez toujours la propriété transitionDuration, sinon la durée est de 0 et la transition n'aura aucun effet.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Syntaxe
Renvoyez la propriété de transition :
object.style.transition
Définissez la propriété de transition :
object.style.transition = "property duration timing-function delay|initial|inherit"
Valeurs de propriété
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
Valeur par défaut: | tout 0 facilité 0 |
---|---|
Valeur de retour : | Une chaîne, représentant la propriété de transition d'un élément |
Version CSS | CSS3 |
Pages connexes
Référence CSS : propriété de transition
❮ Objet de style