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;
}
(publicité)
À lire également dans La Cascade :
Subtilités de CSS Transitions, par Louis Lazaris
Autres ressources à consulter sur ce sujet :
- MDN : transition-property
- Codrops CSS Reference (en anglais)
- Spécification W3C (en anglais)
- Autres entrées du Dico CSS :
- transition
- transition-property
- transition-timing-function
- transition-duration
- transition-delay
Autres articles intéressants :
articles en français :
Animez votre site avec CSS3, par openclassrooms
Transitions CSS3, par Alsacréations
articles en anglais :
Using CSS3 transitions, a comprehensive guide, par Louis Lazaris
Cet article est pour l’essentiel tiré de l’almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.
Sur l’auteur : Chris Coyier est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.
NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.
CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.