Maison >interface Web >tutoriel CSS >Explication détaillée de l'utilisation de la propriété d'animation Transition en CSS3
Explication détaillée de l'utilisation de la propriété d'animation Transition en CSS3
- 高洛峰original
- 2017-03-08 13:27:271735parcourir
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 se produire lorsque la souris clique, obtient le focus, est cliquée ou se déclenche sur n'importe quel modifie l'élément et modifie en douceur la valeur de la propriété CSS avec effet d'animation "
Les valeurs de l'attribut de transition incluent les quatre suivantes :
. •Transition-property : Spécifiez quel attribut CSS de l'élément HTML pour effectuer le traitement du dégradé de transition. Cet attribut peut être divers attributs CSS standard tels que la couleur, la largeur, la hauteur, etc.
•Transition-duration : Spécifiez la durée de la transition de l'attribut
•Transition-timing-function : Spécifiez la vitesse du dégradé :
1. est équivalent à la courbe de Bessel Er (0,25, 0,1, 0,25, 1,0) ;
2. linéaire : (vitesse uniforme), la fonction linéaire est équivalente à la courbe de Bézier (0,0, 0,0, 1,0, 1,0) ; easy-in : (Accélérer), la fonction easy-in est équivalente à la courbe de Bézier (0,42, 0, 1.0, 1.0)
4. la courbe de Bézier (0, 0, 0,58, 1,0) ;
5. facilité d'entrée-sortie : (accélérer puis décélérer), la fonction facilité d'entrée-sortie est équivalente à la courbe de Bézier (0,42, 0, 0,58) , 1.0);
6 , cubique-bézier : (Cette valeur permet de personnaliser une courbe temporelle), une courbe cubique-bézier spécifique. Les quatre valeurs (x1, y1, x2, y2) sont spécifiques aux points P1 et P2 de la courbe. Toutes les valeurs doivent être comprises dans la plage [0, 1], sinon elles seront invalides.
•Transition-delay : Spécifiez le temps de retard, c'est-à-dire le temps qu'il faut pour démarrer le processus de transition.
Compatibilité des navigateurs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition演示1</title>
<style type="text/css">
.animated_p {
margin: 100px auto;
width:100px;
height:60px;
background:#92B901;
/*简写属性*/
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
/*每个属性分开写*/
transition-property:width,height,transform,background,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.4;
}
.animated_p:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:200px;
height:120px;
}
</style>
</head>
<body>
<p class="animated_p"></p>
</body>
</html>Lorsque la souris se déplace vers p dans le code ci-dessus, les attributs CSS : width, height Des effets de transition, de transformation, d'arrière-plan, d'opacité et de dégradé se produisent. Finalement, le style CSS devient le style défini dans .animated_p. Le processus de transition est à peu près le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition演示2</title>
<style type="text/css">
body{
color: #fff;
background:#000;
}
.change{
display:block;
width:400px;
height:400px;
background:url(http://www.php.cn/) no-repeat center;
background-size:cover;
border:1em solid rgba(255,255,255,.8);
margin:50px auto;
}
.change img{
display:block;
width:300px;
height:284px;
opacity:0;
-webkit-transform:translate(-100px,-100px);
transform:translate(-100px,-100px);
-webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
}
.change:hover img{
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);
opacity:1;
}
</style>
</head>
<body>
<a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
<img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
</a>
</body>
</html>Pour pour que Chang'e ait l'effet de flotter vers l'intérieur et vers l'extérieur, l'attribut de transformation est défini, combiné avec l'attribut d'opacité, et l'effet de transition est ajouté. Peut obtenir l'effet :
.
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!