Comment implémenter plusieurs effets de transition CSS

Question

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

.nav a
{
    transformation de texte : majuscule ;
    décoration de texte : aucune ;
    couleur : #d3d3d3 ;
    hauteur de ligne : 1,5 em ;
    taille de police : .8em ;
    bloc de visualisation;
    texte-align:centre;
    texte-ombre : 0 -1,5em 0 rgba(255, 255, 255, 0,15) ;
    -webkit-transition : couleur .2s linéaire ;
    -moz-transition : couleur .2s linéaire ;
    -o-transition : couleur .2s linéaire ;
    transition : couleur .2s linéaire ;
    -webkit-transition : text-shadow .2s linéaire ;
    -moz-transition : text-shadow .2s linéaire ;
    -o-transition : texte-ombre .2s linéaire ;
    transition : texte-ombre .2s linéaire ;
}

.nav a: survol
{
    couleur : #F7931E ;
    texte-ombre : 0 1,5em 0 rgba(247, 147, 30, 0,15) ;
}
Comme vous pouvez le constater, les propriétés de transition s'écrasent les unes les autres. Actuellement, l’ombre du texte s’anime, mais pas la couleur. Comment puis-je les faire animer en même temps ? Merci pour toutes les réponses. 

Answer 1

Edit : j'hésite à supprimer ce message. En termes de compréhension de la syntaxe CSS, il est bon de faire savoir aux gens que all existe, et selon la structure du CSS, c'est probablement préférable à un million de déclarations distinctes. D'un autre côté, cela pourraitavoir une pénalité de performances, même si je n'ai vu aucune donnée pour étayer cette hypothèse. Je vais en rester là pour le moment, mais j'espère que les gens réalisent qu'il y a une dualité là-dedans.

Message original :

Vous pouvez aussi simplement utiliser le code suivant :

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

FWIW : s'il n'est pas spécifié, all是默认的，所以transition: .2s; est la valeur par défaut, donc transition: .2s; peut également obtenir le même effet.

Answer 2

Dans tous les navigateurs prenant en charge les effets de transition, les attributs de transition sont séparés par des virgules :

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

ease 是默认的时间函数，所以你不需要指定它。如果你真的想要 linear, vous devez préciser explicitement :

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

Cela commence à devenir répétitif, donc si vous comptez utiliser la même heure et la même fonction time sur plusieurs propriétés, il est préférable d'utiliser les différentes transition-* propriétés au lieu du raccourci :

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;