Propriété de propriété de transition de transition CSS3

Syntaxe :

transition-property：all | none | <property>[ ,<property> ]*

Analyse des paramètres :
1.all : définissez tous les attributs pouvant faire l'objet d'une transition.
2.none : ne spécifiez pas les attributs pouvant faire l'objet d'une transition.
3.<property> : Spécifiez les propriétés qui peuvent être transférées.
Instructions spéciales :
1. Si vous définissez plusieurs attributs, séparez les noms d'attribut par des virgules.
2. La propriété de script correspondante est transitionProperty.

transition-property est utilisé pour spécifier que l'effet de transition sera exécuté lorsque l'un des attributs de l'élément change. Il a principalement les valeurs suivantes : none (aucun attribut ne change all (all) ; les attributs changent). C'est également le cas. Sa valeur par défaut ; indent (nom de l'attribut de l'élément). Lorsque sa valeur est aucune, la transition cessera de s'exécuter immédiatement. Lorsqu'elle est spécifiée comme all, l'effet de transition sera exécuté lorsqu'une valeur d'attribut de l'élément change. L'ident peut spécifier une certaine valeur d'attribut de l'élément. Les types correspondants sont les suivants :

1. Couleur : Transformée à travers les composants rouge, vert, bleu et transparence (chaque valeur numérique est traitée) tels que : couleur d'arrière-plan, couleur de bordure, couleur, couleur de contour. et d'autres attributs CSS ;

2. Longueur : nombres réels tels que : espacement des mots, largeur, alignement vertical, haut, droite, bas, gauche, remplissage, largeur du contour, marge, largeur minimale, min-height, attributs tels que max-width, max-height, line-height, height, border-width, border-spacing, background-position

3. espacement, largeur, alignement vertical, haut, droite, bas, gauche, largeur minimale, hauteur minimale, largeur maximale, hauteur maximale, hauteur de ligne, hauteur, position d'arrière-plan et autres attributs

<🎜 ; >4, étapes discrètes entières (le nombre entier), se produit dans l'espace des nombres réels et lors de l'utilisation de floor() pour convertir en un nombre entier, tel que : contour-offset, z-index et autres attributs

<🎜 ; >5. La valeur réelle (à virgule flottante) du nombre , telle que : zoom, opacité, poids de la police et autres attributs ;

6.

7. rectangle : par transformation x, y, largeur et hauteur (converties en valeur numérique), telle que : recadrage

visibilité : étapes discrètes, dans la plage numérique de 0 à. 1, 0 signifie "caché", 1 signifie complètement "affiché", tel que : visibilité

9. Ombre : agit sur les attributs de couleur, x, y et flou (flou), tels que : text-shadow<. 🎜>

10. Dégradé : change selon la position et la couleur de chaque arrêt. Ils doivent avoir le même type (radial ou linéaire) et la même valeur d'arrêt pour effectuer une animation, telle que : background-image

11 paint server (SVG) : ne prend en charge que les situations suivantes : à partir d'un dégradé. pour dégradé et couleur pour colorer, puis le travail est similaire à celui ci-dessus

12. liste séparée par des espaces ci-dessus : si la liste a la même valeur d'élément, alors chaque élément de la liste changera en fonction les règles ci-dessus, sinon il n'y aura aucun changement

13. une propriété abrégée : Si toutes les parties de l'abréviation peuvent être animées, elles changeront comme tous les changements de propriété uniques

Quels attributs CSS spécifiques peuvent obtenir l'effet de transition ? ​​Toutes les valeurs d'attribut CSS et les types de valeurs pouvant obtenir l'effet de transition sont répertoriés sur le site officiel du W3C. Vous pouvez cliquer ici pour en savoir plus. Ce qu'il faut rappeler ici, c'est que tous les changements d'attributs ne déclenchent pas l'effet d'action de transition, comme la largeur adaptative de la page. Lorsque le navigateur modifie la largeur, l'effet de transition ne sera pas déclenché. Cependant, les modifications apportées aux types d'attributs indiqués dans le tableau ci-dessus déclencheront un effet d'action de transition.

Exemple de code :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php中文网.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  -moz-transition-property:width;
  -webkit-transition-property:width;
  -o-transition-property:width;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

L'attribut de transition défini par le code ci-dessus est la largeur.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Le code ci-dessus peut définir l'effet de transition de deux attributs, séparés par des virgules.

section suivante