transition CSS3 transition
Explication détaillée de l'attribut transition de SS3 :
Ce chapitre présente l'utilisation de l'attribut transition, qui est également un attribut lié à l'animation.
1. Connaissances de base :
transition traduit en chinois signifie "transition", ce qui signifie que la valeur de l'attribut CSS d'un élément peut être modifiée dans un certain délai de le temps Faites des transitions en douceur.
Cet attribut est un attribut composite comme la bordure, l'arrière-plan et d'autres attributs.
Structure grammaticale :
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
Explication des paramètres :
1.transition-property : Définir ou récupérer les propriétés participant à la transition.
2.transition-duration : Récupère ou définit la durée de la transition de l'objet.
3.transition-timing-function : Récupère ou définit le type d'animation de transition dans l'objet.
4.transition-delay : récupère ou définit l'heure de transition du retard de l'objet.
L'exemple de code est le suivant :
<!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:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>Le code ci-dessus montre comment animer la largeur d'un div de 100px à 500px en deux secondes.
Comme il s'agit d'un attribut composite, il est naturel de définir les attributs séparément
