CSS动画与过渡

动画可以增强网页交互体验，减少代码量，让网页运行更快

C3动画的优势

1.不需要去掌握JS就可以写简单的动画

2.可以直接使用浏览器执行，通过改变属性控制动画，减少了js请求与内存的加载，减少代码量。

transition过渡动画

1.transition-property:要过渡的属性

2.transiton-duration:过渡的时间

3.transition-timing-function:过渡的速度

linear：匀速 ease：缓冲 ease-in：渐入缓冲 ease-out：渐出缓冲 steps(几步，start[初始时第一步完成] || end[初始时第一步未完成])

4.transition-delay：动画延迟时间（默认为0）

transform变换动画

1.translate(x,y)：位置变化 x为正值向右平移 y为正值向下平移

利用translate实现垂直水平居中：position：absolute;left:50%;top:50%;translat(50%,50%)

2.rotate(*deg)：旋转变化 （0~360）

3.scale()：缩放变化 属性值可以为小数

4.skew(x,y) :倾斜变换

5.perspective：透视图