使用動畫
div: hover {
animation: 1s 1s 動畫名 infinite|| 3(次)forwards reverse alternate;
(幾秒)(延時)(名字)(無限循環(huán) 或 次數(shù)+動畫狀態(tài)) (動畫方向) (慢速動畫)
}
定義動畫
@keyframes 動畫名{
0% {background:#ccc}
50%{background:red; width: 300px; height: 100px;}
100%{background:blue; width: 200px; height: 50px;}
}
停止一個無限循環(huán)的動畫 松開繼續(xù)running
animation-play-state: paused;
animation-play-state: running;
---以下可以簡寫---
動畫狀態(tài)
animation-fill-mode
none 回到動畫還沒開始時的狀態(tài)
forwards 讓動畫停留在結(jié)束狀態(tài)
backwards 讓動畫回到第一幀的狀態(tài)
both: 根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則
動畫方向
animation-direction
normal 正向 默認(rèn) 從前往后播放動畫
reverse 反向 倒播動畫
動畫延時
animation-delay: 1s;
