css3 transition動畫

1，transition-property設(shè)置過渡的屬性，比如width height background-color

2，transition-duration設(shè)置過度的時間，比如：1s 500ms

3，transition-timing-function設(shè)置過渡的運(yùn)動方式

linear 勻速

ease 開始和結(jié)束慢速

ease-in 開始是慢速

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

ease-in-out 開始和結(jié)束時慢速

cubic-bezier（n，n，n，n）

? ? ? ?比如：cubic-bezier（0.845，-0.375，0.215，1.335）

????????曲線設(shè)置網(wǎng)站：https://matthewlein.com/ceaser/

4，transition-delay 設(shè)置動畫延遲

5，transition：property duration timing-function delay 同時設(shè)置四個屬性。

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-sd 設(shè)置盒子是否按3d空間顯示

7，translateX，rotateY，rotateZ設(shè)置三維移動

8，rotateX，rotateY，rotateZ 設(shè)置三維旋轉(zhuǎn)

9，scaleX，scaleY，scaleZ 設(shè)置三維縮放

10，tranform-origin 設(shè)置變形的中心點(diǎn)

11，backface-visibility 設(shè)置盒子背面是否可見