Heim > Artikel > Web-Frontend > Wie verwende ich die Übergangsfunktion in CSS3?
Wie verwende ich die Übergangsfunktion in CSS3?
- 零下一度Original
- 2017-06-28 09:40:532661Durchsuche
1.Übergangsfunktion
So verwenden Sie das Übergangsattribut: Transition:Property Duration Timing-Function;
Wobei Property angibt, welche Eigenschaft reibungslos übergehen soll, und Duration angibt, wie lange Es ist erforderlich, die Eigenschaft „Glatter Übergang von Werten“ zu vervollständigen. Die Zeitfunktion gibt die Methode an, mit der ein reibungsloser Übergang durchgeführt wird.
Mehrere Beispiele für sanfte Übergänge:
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. Animationsfunktion
Verwendungsbeispiele:
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>Methoden zur Implementierung von Animationen:
| 方法 | 属性值的变化速度 |
| linear | 在动画开始时与结束时以同样的速度进行变化 |
| ease-in | 动画开始时速度很慢，然后速度沿曲线值进行加快 |
| ease-out | 动画开始时速度很快，然后速度沿曲线值进行放慢 |
| ease | 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢 |
| ease-in-out | 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢 |
Das obige ist der detaillierte Inhalt vonWie verwende ich die Übergangsfunktion in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!