七超营、CSS動畫
1、過渡
transition：過渡阅虫，通過過渡可以指定一個屬性發(fā)生變化時的切換方式演闭。通過過渡可以創(chuàng)建一些非常好的效果，提升用戶體驗颓帝。transition-property: 指定要執(zhí)行過渡的屬性,多個屬性之間用 米碰，隔開。如果所有屬性都需要過渡购城，則使用all關(guān)鍵字吕座。大部分屬性都支持過渡，注意過渡時必須是從一個有效數(shù)值向另外一個有效數(shù)值進行過渡transition-duration: 指定過渡效果的持續(xù)時間瘪板，時間單位 s 和 ms吴趴，1s=1000mstransition-timing-function: 過渡時序函數(shù)，指定過渡的執(zhí)行方式侮攀÷嘀Γ可選值：
ease:默認(rèn)值，慢速開始兰英，先加速撇叁，再減速
linear:勻速運動
ease-in:加速運動
ease-out:加速運動
ease-in-out:先加速后減速
cubic-bezier():貝賽爾曲線，指定時序函數(shù)箭昵，通過https://cubic-bezier.com可自動生成税朴。
steps():分步執(zhí)行過渡效果，可以為其設(shè)置兩個值家制。
第一個值為整數(shù)正林，表示步數(shù)
第二個值
start:在時間開始時執(zhí)行過渡
end：在時間結(jié)束時執(zhí)行過渡transition-delay:過渡效果的延遲，等待一段時間后再執(zhí)行過渡
注意：
使用transition可以同時設(shè)置過渡相關(guān)的所有屬性颤殴，只有一個要求觅廓，如果要寫延遲，則第一個時間表示過渡時間涵但，第二個時間表示延遲時間杈绸。
.box1{
width: 800px; height: 800px;
background-color: silver;
overflow: hidden;
}
.box1 div{
width: 100px; height: 100px;
margin-bottom: 100px;
margin-left: 700px;
}
.box2{
background-color: #bfa;
transition: all 0.5s;
transition-property: all;
transition-duration: 2s;
transition-timing-function: steps(3,end);
transition-delay: 2s;
}
.box3{
background-color: orange;
transition-property: all;
transition-duration: 2s;
}
.box1:hover div{
margin-left: 0px;
}
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
2帖蔓、動畫
動畫和過渡類似，都是可以實現(xiàn)一些動態(tài)的效果瞳脓。不同的是過渡需要在某個屬性發(fā)生變化時才能觸發(fā)塑娇，動畫可以自動出發(fā)動態(tài)效果。設(shè)置動畫效果劫侧，必須使用@keyframes設(shè)置一個關(guān)鍵幀埋酬，關(guān)鍵幀設(shè)置了動畫執(zhí)行的每一個步驟
@keyframes test{
/* from表示動畫的開始位置 */
from{
margin: 0;
background-color: darkkhaki;
}
/* to表示動畫的結(jié)束位置 */
to{
margin-left: 700px;
background-color: darkorange;
}
}
可以為@keyframes添加斷點使得從from到to分為多個階段執(zhí)行
@keyframes falling{
from{
margin-top: 0;
}
50%{
margin-top: 100px;
}
75%{
margin-top: 200px;
}
to{
margin-top: 300px;
}
}
animation-name：要對當(dāng)前元素生效的關(guān)鍵幀的名字animation-duration：動畫的執(zhí)行時間-
同樣可以為動畫設(shè)置延時和貝賽爾曲線
animation-delay: 2s; animation-timing-function: steps(); animation-iteration-count：動畫執(zhí)行次數(shù)，可選值：整數(shù)烧栋、infinite無限次animation-direction：指定動畫運行的方向写妥，可選值：
normal:默認(rèn)值，每次都從from到to運行
reverse:每次從to到from運行
alternate:從from向to運行审姓，重復(fù)執(zhí)行動畫反向執(zhí)行
alternate-reverse:從to向from運行重復(fù)執(zhí)行動畫時反向執(zhí)行animation-play-state：設(shè)置動畫的執(zhí)行狀態(tài)珍特，可選值：
running默認(rèn)值，動畫執(zhí)行
paused動畫暫停
此屬性可結(jié)合hover一起使用animation-fill-mode：動畫的填充模式魔吐，可選值：
none默認(rèn)值扎筒，動畫執(zhí)行完畢元素回到原來的位置
forwards動畫執(zhí)行完畢元素會停止在動畫結(jié)束的位置
backwards動畫等待延時時，元素就處于開始狀態(tài)画畅，即滿足開始狀態(tài)的所有屬性
both結(jié)合了forwards和backwards的屬性砸琅，即等待時處于開始狀態(tài)，結(jié)束時停在結(jié)束位置
.box1{
width: 800px; height: 800px;
background-color: darkgrey;
}
.box1 div{
width: 100px; height: 100px;
margin-bottom: 100px;
margin-left: 0;
}
.box2{
background-color: #bbffaa;
animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
animation-fill-mode: both;
}
@keyframes test{
from{
margin: 0;
background-color: darkkhaki;
}
to{
margin-left: 700px;
background-color: darkorange;
}
}
<div class="box1">
<div class="box2">
</div>
</div>
3轴踱、變形
變形是指通過css來改變元素的形狀或位置，不會影響到頁面的布局谚赎。使用transform用來設(shè)置元素的變形效果淫僻。
（1）平移
translateX()沿著x軸方向平移
translateY()沿著y軸反向平移
translateZ()沿著z軸反向平移
平移元素時
向上為負(fù)值，向下為正值
向左為負(fù)值壶唤，向右為正值
向前為正值雳灵，向后為負(fù)值
若寫百分?jǐn)?shù)表示相對于元素自身大小的百分比移動
.box4:hover{
transform: translateY(-5px);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
<div class="box4"></div>
z軸平移，調(diào)整元素在z軸的位置闸盔，正常情況是調(diào)整元素和人眼之間的距離悯辙。距離越大，元素離人越近迎吵。z軸平移屬于立體效果（近大遠(yuǎn)卸阕）默認(rèn)情況下網(wǎng)頁不支持透視，如果需要看見效果击费，必須要設(shè)置網(wǎng)頁的視距拢蛋。
使用perspective屬性來設(shè)置網(wǎng)頁的視距，一般設(shè)置為800px到1200px之間蔫巩。
html{
perspective: 800px;
}
body{
height: 500px; width: 500px;
margin: 0 auto; border: 1px solid red;
}
.box1{
width: 200px; height: 200px;
background-color: #bbffaa;
margin: 150px auto;
transition: 0.3s;
}
body:hover .box1{
transform: translateZ(100px);
}
<div class="box1"></div>
（2）旋轉(zhuǎn)
通過旋轉(zhuǎn)可以使元素沿著x谆棱，y快压，z軸旋轉(zhuǎn)指定的角度：rotateX()，rotateY()垃瞧，rotateZ()
可選值：度數(shù)：rotateX(45deg)蔫劣，圈數(shù)：rotateY(.25turn)。
使用backface-visibility屬性來設(shè)置是否顯示元素背面个从±剐可選值：
visible默認(rèn)值，顯示背面
hidden不顯示背面
html{
perspective: 800px;
}
.box{
width: 600px; height: 250px;
margin: auto; border: 1px solid red;
}
.box1{
width: 552px; height: 212px;
background-image: url(./img/1.gif);
margin: auto;
transition: 1s;
}
.box:hover .box1{
transform: translateZ(100px) rotateY(180deg);
backface-visibility: visible;
}
<div class="box">
<div class="box1"></div>
</div>
（3）縮放
變形原點默認(rèn)是中點信姓，也可以指定原點的位置
對元素進行縮放的函數(shù)
scaleX()水平方向縮放
scaleY()垂直方向縮放
scale()雙方向縮放
通過這個屬性可以為圖片設(shè)置鼠標(biāo)移入放大效果
.box1{
width: 100px;height: 100px;
background-color: #bbffaa;
margin: 100px auto;
transition: 1s;
transform-origin: 0 0;
}
.box1:hover{
transform: scale(2);
}
<div class="box1"></div>
