Transition-property

La propriété transition-property, habituellement utilisée à l'intérieur de la propriété raccourcie transition, sert à définir la ou les propriétés auxquelles vous voulez appliquer une transition :

//CSS
.exemple {
    transition-property: color;
}

La propriété peut prendre une des valeurs suivantes :

un nom de propriété, comme dans l'exemple ci-dessus
une liste de propriétés (séparées par une virgule) pour transitionner plusieurs propriétés sur un même élément
le mot-clé none indiquant qu'aucune propriété n'aura de transition
le mot-clé all indiquant que toutes les propriétés auront une transition (valeur par défaut)

Si l'on sépare les valeurs par une virgule, les noms de propriétés sont mappées avec les autres propriétés de transition définies (transition-timing-function, transition-duration, transition-delay), ce qui signifie que si une telle liste de propriétés comprend un ou plusieurs noms de propriété invalides, les autres propriétés transitionneront quand même et seront mappées correctement.

La spécification décrit ce comportement ainsi

“Les propriétés non reconnues ou non-animables doivent être conservées dans la liste pour préserver la correspondance des index”.

Pour la compatibilité dans tous les navigateurs, n’oubliez pas les préfixes constructeurs, ou mieux, utilisez Autoprefixer.

//CSS
.exemple {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
}

Menu