CSS3 transition動(dòng)畫(huà):

1、transition-property 設(shè)置過(guò)渡的屬性

2、transition-duration? 設(shè)置過(guò)渡的時(shí)間

3、transition-timing-function? 設(shè)置過(guò)渡的運(yùn)動(dòng)方式

inear 勻速

ease 開(kāi)始和結(jié)束慢速?

ease-in 開(kāi)始是慢速?

ease-out 結(jié)束時(shí)慢速?

ease-in-out 開(kāi)始和結(jié)束時(shí)慢速?

cubic-bezier(n,n,n,n)?

4、transition-delay 設(shè)置動(dòng)畫(huà)的延遲

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è)置盒子背面是否可見(jiàn)

CSS3 animation動(dòng)畫(huà)：

1、@keyframes 定義關(guān)鍵幀動(dòng)畫(huà)

2、animation-name 動(dòng)畫(huà)名稱

3、animation-duration? 動(dòng)畫(huà)時(shí)間

4、animation-timing-function? 動(dòng)畫(huà)曲線

linear? 勻速?

ease 開(kāi)始和結(jié)束慢速?

ease-in 開(kāi)始是慢速?

ease-out 結(jié)束時(shí)慢速?

ease-in-out 開(kāi)始和結(jié)束時(shí)慢速?

steps 動(dòng)畫(huà)步數(shù)?

5、animation-delay? 動(dòng)畫(huà)延遲

6、animation-iteration-count? 動(dòng)畫(huà)播放次數(shù)? n|infinite

7、animation-direction

normal? 默認(rèn)動(dòng)畫(huà)結(jié)束不返回?

Alternate 動(dòng)畫(huà)結(jié)束后返回?

8、animation-play-state? 動(dòng)畫(huà)狀態(tài)?

paused 停止

running? 運(yùn)動(dòng)