關于Css3過渡
- Css3過渡
-
- 過渡作用
- 具體參數的取值及說明
- Css3過渡綜合寫法
- 案例：實際效果（附：代碼）
Css3過渡
什麼是css3過渡？CSS3 過渡其實就是元素從一種樣式逐漸改變為另一種樣式的效果，實作了最初級的動畫效果。
過渡作用
讓元素的變化發生平滑的效果，顯得不生硬
具體參數的取值及說明
<transition-property> 定義用于過渡的屬性；例：all；
<transition-duration> 定義過渡過程所需要的時間；（必選，否則不會産生過渡效果）；例：2s（兩秒）；
<transition-delay> 定義開始過渡的延遲時間；例：1s（一秒）；
<transition-timing-function> 定義過渡的類型；例：ease-in(加速）；
Css3過渡綜合寫法
例：transition：width，0.5s，1s，linear；
transition：指定屬性，過渡時間，延遲時間，動畫類型；
（注意：transition屬性可以同時定義兩組或兩組以上的過渡效果，最少寫一組，也就是過渡時間屬性transition-duration；組與組之間用逗号或空格分隔。）
案例：實際效果（附：代碼）
初始效果：
過渡效果：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1{
width:200px;
height:200px;
background:red;
margin:100px;
border:4px solid #000;
}
.box2{
width:100px;
height:100px;
background:pink;
margin-left:-104px;
transition:all 1s 0.5s;/*所有屬性，過渡時間1s，延遲時間0.5s*/
}
.box1:hover .box2{
margin-left:150px;
background:gold;
}
.box3{
width:600px;
height:300px;
background:skyblue;
margin:100px;
border:4px solid #000;
}
.box4{
width:100px;
height:50px;
background:red;
margin:20px 0px;
}
.con1{
transition:all 5s 1s linear;
}
.con2{
transition:all 2s 1s linear;/*勻速*/
}
.con3{
transition:all 2s 1s ease;/*逐漸降速，由快到慢*/
}
.con4{
transition:all 2s 1s ease-in;/*逐漸加速，由慢到快*/
}
.box3:hover .box4{
width:600px;
background:yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3">
<div class="box4 con1"></div>
<div class="box4 con2"></div>
<div class="box4 con3"></div>
<div class="box4 con4"></div>
</div>
</body>
</html>