Comment implémenter plusieurs effets de transition CSS
P粉258788831
P粉258788831 2023-08-22 11:00:36
0
2
460
<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>
P粉258788831
P粉258788831

répondre à tous(2)
P粉930448030

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.

P粉055726146

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;
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal