La transition-propertypropriété, normalement utilisée dans le cadre d'un transitionraccourci, est utilisée pour définir la ou les propriétés auxquelles vous souhaitez appliquer un effet de transition.
Cela se fait en fournissant le nom de la propriété comme valeur:
.example ( transition-property: color; )La valeur peut être l'une des suivantes:
- Un seul nom de propriété, comme dans l'exemple ci-dessus
- Une liste de noms de propriétés séparés par des virgules (abréviation ou longue), pour la transition de plusieurs propriétés sur un seul élément
- Le mot
none- clé , qui indique qu'aucune propriété ne fera la transition - Le mot
all- clé , qui indique que toutes les propriétés seront transférées (valeur par défaut)
Lorsque séparant par des virgules les valeurs, les noms des propriétés sont essentiellement mises en correspondance avec les autres propriétés de transition définies ( transition-timing-function, transition-duration, et transition-delay). Cela signifie donc que si une liste de propriétés séparées par des virgules comprend un ou plusieurs noms de propriété qui ne sont pas valides, les autres propriétés continueront à effectuer la transition et mapperont à leurs propriétés de transition associées prévues.
La spécification décrit cela en disant:
«(U) propriétés non reconnues ou non animables doivent être conservées dans la liste pour préserver la correspondance des indices.»
Lorsque vous utilisez une valeur de noneou les mots inherit- clés universels ou initial, ces valeurs ne peuvent pas être utilisées dans une liste séparée par des virgules, sinon cela entraînera une erreur de syntaxe et la ligne entière sera ignorée.
Pour la compatibilité dans tous les navigateurs pris en charge, les préfixes de fournisseur sont requis, avec la syntaxe standard déclarée en dernier:
.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )IE10 (la première version stable d'IE à prendre en charge transition-property) ne nécessite pas le -ms-préfixe.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |