CSS3 transition動(dòng)畫:
1、transition-property 設(shè)置過(guò)渡的屬性
2遥巴、transition-duration? 設(shè)置過(guò)渡的時(shí)間
3千康、transition-timing-function? 設(shè)置過(guò)渡的運(yùn)動(dòng)方式
inear 勻速
ease 開始和結(jié)束慢速?
ease-in 開始是慢速?
ease-out 結(jié)束時(shí)慢速?
ease-in-out 開始和結(jié)束時(shí)慢速?
cubic-bezier(n,n,n,n)?
4、transition-delay 設(shè)置動(dòng)畫的延遲
5铲掐、transition: property duration timing-function delay 同時(shí)設(shè)置四個(gè)屬性
CSS3 transform變換：
1拾弃、translate(x,y) 設(shè)置盒子位移
2、scale(x,y)? 設(shè)置盒子縮放
3摆霉、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4豪椿、skew(x-angle,y-angle) 設(shè)置盒子斜切
5、perspective? 設(shè)置透視距離
6携栋、transform-style? flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7搭盾、translateX、translateY婉支、translateZ? 設(shè)置三維移動(dòng)
8鸯隅、rotateX、rotateY磅摹、rotateZ? 設(shè)置三維旋轉(zhuǎn)
9滋迈、scaleX霎奢、scaleY户誓、scaleZ? 設(shè)置三維縮放
10、tranform-origin? 設(shè)置變形的中心點(diǎn)
11幕侠、backface-visibility 設(shè)置盒子背面是否可見
CSS3 animation動(dòng)畫：
1帝美、@keyframes 定義關(guān)鍵幀動(dòng)畫
2、animation-name 動(dòng)畫名稱
3晤硕、animation-duration? 動(dòng)畫時(shí)間
4悼潭、animation-timing-function? 動(dòng)畫曲線
linear? 勻速?
ease 開始和結(jié)束慢速?
ease-in 開始是慢速?
ease-out 結(jié)束時(shí)慢速?
ease-in-out 開始和結(jié)束時(shí)慢速?
steps 動(dòng)畫步數(shù)?
5庇忌、animation-delay? 動(dòng)畫延遲
6、animation-iteration-count? 動(dòng)畫播放次數(shù)? n|infinite
7舰褪、animation-direction
normal? 默認(rèn)動(dòng)畫結(jié)束不返回?
Alternate 動(dòng)畫結(jié)束后返回?
8皆疹、animation-play-state? 動(dòng)畫狀態(tài)?
paused 停止
running? 運(yùn)動(dòng)
