為什么叫簡單動畫懂更？
因為他只有2個狀態(tài)：最初狀態(tài)和末態(tài);想要實現(xiàn)復(fù)雜動畫就必須要用關(guān)鍵幀keyframes:它可以從a跳到b锌订，從b跳到c竹握，....
須知
- 1s=1000ms
- 速度等于位移/時間
v=(200-100)/60
要點
- transition: 過渡樣式 時間 速度 （延時）
- 常見過渡：ease ease-in ease-out ease-in-out linear matrix
- transition一定要寫在初始態(tài) 要有來有回 否則you去無回
動畫深刻剖析
- 淡入淡出 :opacity
- 展開和收起: width height
- 位移：top /left/ right /bottom/ margin
雷區(qū)
-
var a=.1就是var a=0.1js和java中都可以這么寫---》裝逼寫法 - transition 默認(rèn)運動方式就是ease，可以省略,效果一樣
- opacity默認(rèn)值是1辆飘，所以初始狀態(tài)可以不寫出;但是top是auto啦辐，所以初始一定要寫;
-
transition : all 1s ease谓传；是什么鬼？它是一種偷懶寫法芹关，等價于
transition:
width 1s ease,
height 1s ease;
//初態(tài)
.box{
width:100px;
height:100px;
background:red;
transition:
width 1s ease,
height 1s ease 1s; //最后參數(shù)表延時可省略续挟，當(dāng)它等于前面的動畫時間則表示按順序執(zhí)行，否則為并發(fā);(平級關(guān)系同步執(zhí)行充边，延遲稍后執(zhí)行)
}
//末態(tài)
.box:hover{
width:200px;
height:200px庸推；
}
