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


327

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 se remplacent. En l'état, l'ombre du texte s'anime, mais pas la couleur. Comment les faire animer simultanément? Merci pour toutes les réponses.


N'oubliez pas que transition: allc'est très buggé pour safari / ipad: joelglovier.com/writing/…
Oğuzhan Kahyaoğlu

Réponses:


584

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

easeest 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 fonctions de synchronisation sur plusieurs propriétés, il est préférable d'aller de l'avant et d'utiliser les différentes transition-*propriétés au lieu de la sténographie:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

11
Je suppose que la transformation est une chaîne où l'ordre est important, donc la syntaxe est agréable si vous êtes habitué au chaînage fonctionnel, tandis que la transition nécessite une liste non ordonnée d'éléments entièrement indépendants, donc les virgules sont appropriées
mirichan

1
En tant que commentaire général sur les transitions en CSS, il convient de garder à l'esprit que le fait d'avoir plusieurs définitions de transition l'une après l'autre ne fonctionnera pas, et pour cela, elles doivent être dans la même définition (comme dans la SA ici). Selon les règles de base de CSS, la "dernière" règle s'applique, donc s'il y a plusieurs définitions sur des lignes distinctes, seule la dernière définition sera appliquée. FYI
TheCuBeMan

37

Vous pouvez également tout simplement de manière significative avec:

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

44
Vous pouvez réellement supprimer «tous» car c'est la valeur par défaut, sauf indication contraire.
joshnh

13
+1 pour un excellent point, mais je pense qu'il est utilement explicite de le garder là, en particulier pour la cohérence et la compréhension entre les équipes.
XML

4
Attention ça! Si le développement pour mobiles, en combinaison avec des éléments accélérés par le matériel, rend les nouveaux appareils glitchy et les anciens appareils inutilisables.
Ilya Karnaukhov,

2
Merci, @ CanerŞahin. Pouvez-vous nous fournir de la documentation ou des outils d'analyse comparative qui aideront les gens à comprendre ce point? De plus, voyez-vous des preuves montrant que «tout» est pire que de ne pas utiliser de spécificateur du tout?
XML

3
@XML La façon dont il a été expliqué comporte deux effets négatifs. 1, le navigateur ajoute des ressources supplémentaires en raison de l'utilisation de «tous». Le navigateur écoutera attentivement cet élément en attendant toute modification moins performante et pourra créer des janks de page. 2, peut créer des effets inattendus si un développeur met plus tard une couleur d'arrière-plan qui sera ensuite transférée, ce qui pourrait ne pas être attendu ou requis.
Stefan Burt

29

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


24

Si vous faites en sorte que toutes les propriétés soient 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 (la propriété de transition écrase «all»), car vous pourriez vous retrouver avec un comportement indésirable et des résultats de performance inattendus.



1

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

l'autoprefixer est encore plus agréable!
réécrit

autoprefixer + stylet FTW.
Jason Lydon

1

Il est possible de définir plusieurs transitions avec des valeurs différentes pour la durée, le retard 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/


0

Il est également possible d'éviter de spécifier complètement les propriétés.

#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;
 }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.