Maison >interface Web >tutoriel CSS >Introduction à l'utilisation de la propriété d'animation Transition en CSS3
Introduction à l'utilisation de la propriété d'animation Transition en CSS3
- 不言original
- 2018-06-28 14:29:482066parcourir
Cet article présente principalement en détail l'utilisation de l'attribut d'animation de transition dans CSS3 et vous apprend à utiliser l'animation de transition. Les amis intéressés peuvent se référer au
Standard W3C pour la transition CSS3. La transition permet aux valeurs des propriétés CSS de passer en douceur dans un certain intervalle de temps. Cet effet peut être déclenché par des clics de souris, le focus, un clic ou toute modification apportée à l'élément, et anime en douceur l'effet modifie la valeur de la propriété CSS. . "
La valeur de l'attribut de transition comprend les quatre éléments suivants :
•Transition-property : Spécifie quel attribut CSS de l'élément HTML doit faire la transition. Traitement du dégradé, cet attribut peut être divers attributs CSS standards 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. Enfin, 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://p3.qhimg.com/t0134c65e59012a1257.png) 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>Afin de faire changer Chang'e. Nous avons pour effet de flotter vers l'intérieur et l'extérieur, l'attribut de transformation est défini et combiné avec l'attribut d'opacité, ajoutez L'effet de transition peut obtenir l'effet : 
10 Effets de chargement implémentés par CSS3
Propriétés d'animation de transition et d'animation en CSS3 Introduction à l'utilisation
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!