Comment avoir plusieurs transitions CSS sur un élément?
C'est une question assez simple mais je ne trouve pas de très bonne documentation sur les propriétés de transition CSS. Voici l'extrait 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 s'écrasent mutuellement. En l'état, l'ombre de texte s'animera, mais pas la couleur. Comment puis-je les amener à animer simultanément? Merci pour toute les réponses.
7 réponses
Les propriétés de Transition sont délimitées par des virgules dans tous les navigateurs qui prennent en charge les transitions:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease est la fonction de synchronisation par défaut, vous n'avez donc pas à la spécifier. Si vous voulez vraiment linear, vous devrez le spécifier:
transition: color .2s linear, text-shadow .2s linear;
Cela commence à devenir répétitif, donc si vous utilisez les mêmes fonctions d'heure et de synchronisation sur plusieurs propriétés, il est préférable d'utiliser les différentes propriétés transition-* au lieu du raccourci:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
Vous pouvez également simplement de manière significative avec:
.nav a {
-webkit-transition: all .2s;
}
Quelque Chose comme ce qui suit permettra plusieurs transitions simultanément:
-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
Si vous animez toutes les propriétés de la même manière, vous pouvez les définir séparément, ce qui vous permettra de ne pas répéter le code.
transition: all 2s;
transition-property: color, text-shadow;
Il y a plus à ce sujet ici: raccourci de transition CSS avec plusieurs propriétés?
J'éviterais d'utiliser la propriété all (transition-property écrase' all'), car vous pourriez vous retrouver avec un comportement indésirable et des performances inattendues.
Voici un mixin moins pour la transition de deux propriétés à la fois:
.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
-webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
-moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
-o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}
Il est possible de définir les transitions multiples avec des valeurs différentes pour la durée, le délai et la fonction de synchronisation. Pour diviser différentes transitions, utilisez ,
button{
transition: background 1s ease-in-out 2s, width 2s linear;
-webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}
Référence: https://kolosek.com/css-transition/