web-dev-qa-db-fra.com

Comment avoir plusieurs transitions CSS sur un élément?

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.

cssanimationcss3css-transitions
295
Eric Thoma

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;
526
coreyward

Vous pouvez aussi simplement simplement avec:

.nav a {
    -webkit-transition: all .2s;
}
36
XML

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

29
Delan Azabani

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.

23
Corey Young
.nav a {
    transition: color .2s, text-shadow .2s;
}
2
Locoroco

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/

1
Nesha Zoric

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;
}
1
user1445230

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;
 }
0
jerblack