css3 transition动画

1，transition-property设置过渡的属性，比如width height background-color

2，transition-duration设置过度的时间，比如：1s 500ms

3，transition-timing-function设置过渡的运动方式

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

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

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

        曲线设置网站：https://matthewlein.com/ceaser/

4，transition-delay 设置动画延迟

5，transition：property duration timing-function delay 同时设置四个属性。

css3 transform变换

1，translate（x，y）设置盒子位移

2，scale（x，y）设置盒子缩放

3，rotate（deg）设置盒子旋转

4，skew（x-angle，y-angle）设置盒子斜切

5，perspective 设置透视距离

6，transform-style flat | preserve-sd 设置盒子是否按3d空间显示

7，translateX，rotateY，rotateZ设置三维移动

8，rotateX，rotateY，rotateZ 设置三维旋转

9，scaleX，scaleY，scaleZ 设置三维缩放

10，tranform-origin 设置变形的中心点

11，backface-visibility 设置盒子背面是否可见