【CSS动画】渐变，位移、倾斜、过渡、旋转、缩放

线性渐变

background-image:linear-gradient(颜色1，颜色2);

渐变方向默认为从上到下
如要改变方向：
background-image:linear-gradient:(to 方向，颜色1，颜色2);
方向可以是对角，也可以是角度(角度deg)
颜色可以添加多种；
颜色后面可以添加百分比或像素设置区域；

重复性渐变：
	background-image:repeating-linear-gradient:(颜色1(像素)，颜色2(像素));

镜像渐变

background:radial-gradient(颜色1，颜色2)

颜色前面可以定义这是正圆等
 at 圆心在哪里、定义园的直径；

动画(transform)

transform实现实现文字或图像的旋转、缩放、倾斜、移动

位移(translate)

transform:translate(X轴的距离，Y轴的距离);
transform:translate(50px,50px);//代表水平方向移动50像素，垂直方向移动50像素
//如果只写一个参数，默认是水平方向的移动，但可以通过
translateX或translateY来设置是水平还是竖直方向的位移；

缩放:(scale)

transform:scale(缩放的倍数，1是正常大小，1以下为缩小，1以上为放大)

旋转:(rotate)

transform:rotate(旋转的度数)
transform-orgin:更改旋转的基准点;
//
transform:rotate(90deg)//代表旋转90度
transform-orgin:bottom left;//代表旋转的中心点在左下

倾斜:(skew)

transform:rotate(X轴的倾斜度数，Y轴的倾斜度数)
transform:rotate(20deg)//代表水平方向的倾斜，倾斜20度

过渡：(transition)

transition:(时间);
transition:1s；//代表从原本的状态变成预设的状态需要1秒的时间进行过渡动画

动画帧(@keyframes)

动画开始from，里面包含动画的初始状态
动画结束to，里面包含动画的结束状态

@keyframes 名字{
		from{}
		to{
		}	
	}
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode