Comment avoir plusieurs transitions CSS sur un élément?

Question

C'est une question assez simple mais je ne trouve pas de très bonne documentation sur les propriétés de la transition CSS. Voici l'extrait de code CSS:

     .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
 

Comme vous pouvez le voir, les propriétés de transition sont en train de s’écraser. En l'état, l'ombre du texte s'animera, mais pas la couleur. Comment les faire animer simultanément? Merci pour toutes les réponses.

Answer 1

Les propriétés de transition sont délimitées par des virgules dans tous les navigateurs prenant en charge les transitions:

 .nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}
 

La facilité est la valeur par défaut, vous n'avez donc pas à le spécifier. Si vous voulez vraiment linéaire, vous devrez le spécifier, c'est-à-dire -webkit-transition: color .2s linear, text-shadow .2s linear ;

Answer 2

Vous pouvez aussi simplement et significativement avec:

 .nav a {
    -webkit-transition: all .2s;
}
 

Answer 3

Si vous vous toutes les propriétés sont animés de la même, vous pouvez définir séparément qui vous permettra de ne pas répéter le code.

 transition: all 2s;
 transition-property: color, text-shadow;

il n'y a plus à ce sujet ici: CSS transition abréviation avec plusieurs propriétés?

Je voudrais éviter à l'aide de la propriété tout (transition-property remplace 'all'), car vous pourriez vous retrouver avec un comportement indésirable et inattendu performances.

Answer 4

Comme ça:

 -webkit-transition: color .2s linear, text-shadow .2s linear;
-moz-transition: color .2s linear, text-shadow .2s linear;
-o-transition: color .2s linear, text-shadow .2s linear;
transition: color .2s linear, text-shadow .2s linear;
 

Exemple: http://jsbin.com/omogaf/2

Answer 5

.nav a {
    transition: color .2s, text-shadow .2s;
}