Maison >interface Web >tutoriel HTML >Comment utiliser la fonction de transition en CSS3 ?
Comment utiliser la fonction de transition en CSS3 ?
- 零下一度original
- 2017-06-28 09:40:532695parcourir
1.fonction de transition
Comment utiliser l'attribut de transition : transition:property duration timing-function;
Où la propriété indique quelle propriété doit faire l'objet d'une transition en douceur et la durée indique la durée il faut pour compléter la propriété Transition en douceur des valeurs, la fonction de synchronisation indique la méthode utilisée pour effectuer une transition en douceur.
Plusieurs exemples de transitions fluides :
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12 #test{13
width: 500px;14 height: 500px;15 background-color: yellow;16 /*css动画*/17
transform: rotate(0);18 -webkit-transition: transform 0.5s linear, width 0.5s linear;19 -moz-transition: transform 0.5s linear, width 0.5s linear;20 -ms-transition: transform 0.5s linear, width 0.5s linear;21 -o-transition: transform 0.5s linear, width 0.5s linear;22 transition: transform 0.5s linear, width 0.5s linear;23 }24 #test:hover{25 width: 200px;26 transform: rotate(180deg);27 }28 </style>29 </body>30 </html>2. Fonction d'animation
Exemples d'utilisation :
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12 /*animation动画*/13
@-webkit-keyframes colorChange {14 0%{15 background-color: deepskyblue;16 }
50%{18
background-color: red;19 }20
100%{21 background-color: deepskyblue;22 }23 }24
#test{25 width:500px;26 height: 500px;27
background-color: deepskyblue;28 }29 #test:hover{30 animation-name: colorChange;
animation-duration: 1s;32 animation-timing-function: linear;33 }34 </style>35 </body>36
</html>Méthodes de mise en œuvre de l'animation :
| 方法 | 属性值的变化速度 |
| linear | 在动画开始时与结束时以同样的速度进行变化 |
| ease-in | 动画开始时速度很慢，然后速度沿曲线值进行加快 |
| ease-out | 动画开始时速度很快，然后速度沿曲线值进行放慢 |
| ease | 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢 |
| ease-in-out | 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢 |
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn