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;
}

À lire également dans La Cascade :

Subtilités de CSS Transitions, par Louis Lazaris

Autres ressources à consulter sur ce sujet :

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 : 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.