La norme W3C décrit la transition CSS3 comme suit : "La transition CSS permet aux valeurs d'attribut CSSde passer en douceur dans un certain intervalle de temps. Cet effet peut être obtenu lorsque la souris clique, obtient le focus, c'est déclenché par un clic ou toute modification de l'élément, et modifie en douceur la valeur de l'attribut CSS avec un effet d'animation "
transition css3 (Transition CSS) Rendre l'animation plus vivante et réaliste, apprenons-la ensemble. .Transitions CSS.
Comment ça marche ?
Les effets de transition CSS3 permettent à un élément de passer d'un effet à un autre. Pour ce faire, vous devez préciser deux choses et préciser la durée de l'effet.
Par exemple :
.className{
transition : largeur 2s;
-moz-transition : largeur 2s ; /* Firefox 4 */
-webkit-transition : largeur 2s ; /* Safari et Chrome */
-o-transition : largeur 2s; /* Opera */
}
Remarque : Si En ne spécifiant pas le temps de retard de l'animation, la transition n'aura aucun effet car la valeur par défaut est 0.
Lorsque la souris est posée dessus, la transformation démarre :
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> Changements de style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>Attributs de transition
Le tableau suivant répertorie tous les attributs de transition :
Propriétés 🎜> Attribut raccourci de transition, utilisé pour définir quatre attributs de transition dans un seul attribut. 3 transition-property Spécifie le nom de la propriété CSS qui applique la transition. 3 transition-duration Définir le temps passé pour l'effet de transition. La valeur par défaut est 0. 3 transition-timing-function spécifie la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ». 3 transition-delay Spécifie quand l'effet de transition commence. La valeur par défaut est 0. 3 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>需要鼠标在图片上面悬停2秒才显示效果</p>
</body>
</html>
