C'est une question assez simple mais je ne trouve pas une 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 constater, les propriétés de la transition se écrasent. Dans l'état actuel des choses, l'ombre du texte s'animera, mais pas la couleur. Comment puis-je les amener à animer simultanément? Merci pour toutes les réponses.
Les propriétés de transition sont délimitées par des virgules dans tous les navigateurs prenant 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 temps et les mêmes fonctions de chronométrage pour 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 aussi simplement simplement 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 toutes les propriétés sont animées 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 (propriété de transition, écrase "tout"), car vous risqueriez de vous retrouver avec un comportement indésirable et des performances inattendues.
.nav a {
transition: color .2s, text-shadow .2s;
}
Il est possible de définir les multiples transitions avec différentes valeurs de durée, de délai et de fonction de minutage. Pour scinder 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/
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 également possible d'éviter de spécifier les propriétés complètement.
#box {
transition: 0.4s;
position: absolute;
border: 1px solid darkred;
bottom: 20px; left: 20px;
width: 200px; height: 200px;
opacity: 0;
}
#box.on {
opacity: 1;
height: 300px;
width: 500px;
}