Introduction au nouvel attribut de transition en CSS3 (avec exemples)

Cet article vous présente une introduction au nouvel attribut de transition en CSS3 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Une nouvelle transition de module a été ajoutée dans CSS3, qui peut déclencher des changements dans l'apparence des éléments via quelques événements CSS simples, rendant l'effet plus délicat.
Il s'agit d'un attribut composite, qui comprend principalement les sous-attributs suivants.

transition-property : Spécifiez la propriété CSS de transition ou de simulation dynamique
transition-duration : Spécifiez le temps nécessaire pour terminer la transition
transition-timing-function : Spécifiez la fonction de transition
transition-delay : Spécifiez le délai pour le début de l'apparition

Par exemple :

transition: background-color .5s ease .1s;

Remarque : Lorsque l'attribut "transition-property" est défini sur all, il représente le attributs de toutes les valeurs médianes.

Exemple :

width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;

Vous pouvez également définir des propriétés individuelles.

Recommandations associées :

Attribut de transition CSS3_html/css_WEB-ITnose

Explication détaillée et partage d'exemples de l'attribut Transition en CSS3 _CSS/HTML

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!