Comment implémenter plusieurs effets de transition CSS
P粉258788831
2023-08-22 11:00:36
<p>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 : </p>
<pre class="brush:php;toolbar:false;">.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) ;
}</pré>
<p>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. </p>
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 :
FWIW : s'il n'est pas spécifié,
all
是默认的,所以transition: .2s;
est la valeur par défaut, donctransition: .2s;
peut également obtenir le même effet.Dans tous les navigateurs prenant en charge les effets de transition, les attributs de transition sont séparés par des virgules :
ease
是默认的时间函数,所以你不需要指定它。如果你真的想要linear
, vous devez préciser explicitement :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 :