css的动画

一.过渡(transition)
transition: 要过渡的属性 | 花费时间 | 运动曲线 | 何时开始;

二.2D变形(transfrom)
1.translate（x,y）表示移动平移的意思
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

2.scale（x,y）表示元素进行水平或垂直方向的缩放。
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

3.rotate(deg)表示对元素进行旋转，正值为顺时针，负值为逆时针（transform:rotate(45deg)）

4.transform-origin可以调整元素转换变形的原点
transform-origin: 50px 10px ;

5.倾斜 skew(deg, deg)
transform:skew(30deg,0deg);

三.3D变形(transform)
1.rotateX() 就是沿着 x 立体旋转
rotateY()沿着y轴进行旋转
rotateZ()沿着z轴进行旋转

2.translateX(x) 仅水平方向移动（X轴移动）translateY(y) 仅垂直方向移动（Y轴移动）translateZ(z) 前后移动，直观的表现就是大小变化
translate3d(x,y,z) 其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

四.动画animation
animation:动画名称 | 动画时间 | 运动曲线 | 何时开始 | 播放次数 | 是否反方向;