Comment puis-je utiliser le raccourci CSS pour effectuer la transition entre plusieurs propriétés simultanément ?

Transition de plusieurs propriétés CSS avec le raccourci

En CSS, la propriété de transition offre un raccourci pratique pour effectuer la transition entre plusieurs propriétés simultanément. Cela peut simplifier votre code et le rendre plus concis. Pour utiliser le raccourci, suivez cette syntaxe :

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

Notez que la durée doit précéder le délai si elle est spécifiée.

Application de transitions abrégées à des propriétés spécifiques :

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Transition de toutes les propriétés :

Vous pouvez effectuer la transition toutes les propriétés avec le raccourci suivant :

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Exemple :

Considérons l'exemple suivant :

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

Dans cet exemple, l'ajout du show classe entraînera une transition progressive de la hauteur et de l'opacité de l'élément.

Remarque : La compatibilité de la transition est excellente (au-dessus de 94 % au niveau mondial), son utilisation est donc généralement sûre. Si vous êtes préoccupé par la compatibilité, reportez-vous à https://caniuse.com/css-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!