Comment utiliser correctement le raccourci de transition CSS pour plusieurs propriétés ?

Comment utiliser le raccourci de transition CSS avec plusieurs propriétés

Le raccourci de transition CSS vous permet de spécifier plusieurs propriétés de transition dans une seule déclaration. Cela peut être utile pour réduire la quantité de code que vous devez écrire. Cependant, trouver la syntaxe correcte peut être difficile.

Syntaxe raccourcie incorrecte

L'extrait de code fourni utilise de manière incorrecte le raccourci de transition CSS :

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

Le problème réside dans le troisième paramètre de la transition d'opacité. Vous ne pouvez pas spécifier de délai après la durée.

Syntaxe abrégée correcte

La syntaxe correcte pour le raccourci de transition CSS avec plusieurs propriétés est la suivante :

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Notez que la durée doit intervenir avant le délai, si ce dernier est spécifié.

Exemple

Pour faire la transition à la fois de la hauteur et de l'opacité d'un élément à l'aide du raccourci, vous écririez :

.element {
  transition: height 0.5s, opacity 0.5s;
}

Alternativement, vous pouvez effectuer la transition de toutes les propriétés CSS d'un élément à la fois :

.element {
  transition: all 0.5s;
}

En utilisant le raccourci de transition CSS, vous pouvez simplifiez votre code CSS et réduisez le temps nécessaire à la définition des transitions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!