動(dòng)畫模塊
- 格式：
1.animation-name: asd;（取值是自己命名，告訴系統(tǒng)需要執(zhí)行哪個(gè)動(dòng)畫）
@keyframes lnj { from{ } to{ } }
（告訴系統(tǒng)我們需要自己創(chuàng)建一個(gè)名稱叫做lnj的動(dòng)畫）
3.animation-duration: 3s;（告訴系統(tǒng)動(dòng)畫持續(xù)的時(shí)長）
- 其他屬性
- animation-delay: 2s;（告訴系統(tǒng)多少秒之后開始執(zhí)行動(dòng)畫）
- animation-timing-function: linear;（勻速）（告訴系統(tǒng)動(dòng)畫執(zhí)行的運(yùn)行速度）
- animation-iteration-count: 3;（告訴系統(tǒng)動(dòng)畫需要執(zhí)行幾次）
- animation-direction: alternate;（告訴系統(tǒng)是否需要執(zhí)行往返動(dòng)畫）
- normal, 默認(rèn)的取值, 執(zhí)行完一次之后回到起點(diǎn)繼續(xù)執(zhí)行下一次
- alternate, 往返動(dòng)畫, 執(zhí)行完一次之后往回執(zhí)行下一次
- animation-play-state: paused;（告訴系統(tǒng)當(dāng)前動(dòng)畫是否需要暫停）（放在：hover里使用）
- 取值:
running: 執(zhí)行動(dòng)畫
paused: 暫停動(dòng)畫 - 過渡和動(dòng)畫之間的異同：
- 不同點(diǎn)：
- 過渡必須人為的觸發(fā)才會(huì)執(zhí)行動(dòng)畫
- 動(dòng)畫不需要人為的觸發(fā)就可以執(zhí)行動(dòng)畫
- 相同點(diǎn)
- 過渡和動(dòng)畫都是用來給元素添加動(dòng)畫的
- 過渡和動(dòng)畫都是系統(tǒng)新增的一些屬性
- 過渡和動(dòng)畫都需要滿足三要素才會(huì)有動(dòng)畫效果
通過我們的觀察, 動(dòng)畫是有一定的狀態(tài)的
1.等待狀態(tài)
2.執(zhí)行狀態(tài)
3.結(jié)束狀態(tài)
- animation-fill-mode作用:
- 指定動(dòng)畫等待狀態(tài)和結(jié)束狀態(tài)的樣式
- 取值:
none: 不做任何改變
forwards: 讓元素結(jié)束狀態(tài)保持動(dòng)畫最后一幀的樣式
backwards: 讓元素等待狀態(tài)的時(shí)候顯示動(dòng)畫第一幀的樣式
both: 讓元素等待狀態(tài)顯示動(dòng)畫第一幀的樣式, 讓元素結(jié)束狀態(tài)保持動(dòng)畫最后一幀的樣式 - 動(dòng)畫模塊連寫格式：
- animation:動(dòng)畫名稱 動(dòng)畫時(shí)長 動(dòng)畫運(yùn)動(dòng)速度 延遲時(shí)間 執(zhí)行次數(shù) 往返動(dòng)畫;
- 動(dòng)畫模塊連寫格式的簡寫：
- animation:動(dòng)畫名稱 動(dòng)畫時(shí)長;
