過渡
transition-property:none | all | property
transition-duration:time
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[start | end]?) | cubic-bezier(<number>,<number>,<number>,<number>)
- linear 線性過渡 勻速
- ease 平滑過渡
- ease-in 由慢到快
- ease-out 由快到慢
- ease-in-out 慢-快-慢
- cubic-bezier(<number>,<number>,<number>,<number>) 貝塞爾曲線
transition-delay-time:time
簡(jiǎn)寫方式
transition:property duration timing-function delay
transition:transform 2s ease-in-out 1s;
動(dòng)畫
animation-name:keyframename | none;
- keyframename:指定要綁定到選擇器的關(guān)鍵幀的名稱
- none:指定有沒有動(dòng)畫(可用于覆蓋從級(jí)聯(lián)的動(dòng)畫)
animation-duration:time;
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[start | end]?) | cubic-bezier(<number>,<number>,<number>,<number>)
animation-delay:time;
animation-iteration-count:infinite | <number>;
檢索或設(shè)置對(duì)象動(dòng)畫的循環(huán)次數(shù)
animation-direction:normal | reverse | alternate | alternate-reverse | initial | inherit
檢索或設(shè)置對(duì)象動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)
- normal 正常方向
- reverse 反方向
- alternate 動(dòng)畫先正常運(yùn)行再反方向運(yùn)行,并持續(xù)交替運(yùn)行
- alternate-reverse 動(dòng)畫先反方向運(yùn)行再正方形運(yùn)行,并持續(xù)交替運(yùn)行
交替運(yùn)行時(shí)依賴于動(dòng)畫的循環(huán)次數(shù)的
animation-fill-mode:none | forwards | backwards | both | initial | inherit
規(guī)定當(dāng)動(dòng)畫不播放時(shí)(當(dāng)動(dòng)畫完成或當(dāng)動(dòng)畫有延遲未開始播放時(shí)),要應(yīng)用到元素的樣式
- none 默認(rèn)值,不設(shè)置對(duì)象動(dòng)畫之外的狀態(tài)
- forwards 設(shè)置對(duì)象狀態(tài)為動(dòng)畫結(jié)束時(shí)的狀態(tài)
- backwards 設(shè)置對(duì)象狀態(tài)為動(dòng)畫開始時(shí)的狀態(tài)
- both 設(shè)置對(duì)象狀態(tài)為動(dòng)畫結(jié)束或開始的狀態(tài)
animation-play-state:paused | running;
指定動(dòng)畫是否正在運(yùn)行或已暫停
簡(jiǎn)寫方式
animation: name duration timing-function delay iteration-count direction fill-mode play-state
name duration 是必須的,會(huì)優(yōu)先判斷這兩個(gè)值
@keyframes
創(chuàng)建動(dòng)畫,通過逐步改變一個(gè)CSS樣式設(shè)定到另一個(gè),在動(dòng)畫過程中可以通過@keyframes規(guī)則多次更改CSS樣式的設(shè)定
@keyframes animationname{
keyframes-selector{
css-styles;
}
}
參數(shù)說明:
animationname:必寫項(xiàng),定義animation的名稱
keyframes-selector:必寫項(xiàng),動(dòng)畫持續(xù)時(shí)間的百分比,0-100%,from(0%),to(100%)
css-styles:必寫項(xiàng),一個(gè)或多個(gè)合法的CSS樣式屬性
