一、动画
animation动画属性是一个简写属性，用于设置六个动画属性
aninmation-name动画名称，被调用
animation-duration完成动画需要的持续时间
animation-timing-function定义动画从一套css样式变为另一套样式的时间，用于使变化平滑（IE9及之前版本不支持）
animation-delay规定动画延迟时间
animation-iteration-count规定动画的播放次数
animation-direction规定动画是否逆向播放normal为默认值正常播放alternate规定动画播放完反向播放（IE9及之前版本不支持）
animation-play-state规定动画是否播放停止。默认running播放，paused暂停
animation-fill-mode规定动画在播放前后效果是否可见
@keyframes通过该规则创建动画（Firefox支持-moz-，Opera支持-o-，Safari和Chrome支持-webkit-）
语法：
@keyframes mymove { 0% {top:0px; left:0px; background:red;} 100% {top:100px; left:100px; background:black;}
！注释：from相当0% to相当100%
二、转换
①transform允许将元素缩放、旋转、倾斜、移动等，应用于2D或3D转换
值：
none定义不进行转换
translate(x,y)定义2d转换
translate3d(x,y,z)定义3d转换
translateX(x)、translateY(y)定义转换只有一个轴。translateZ(z)定义3d转换只有z轴
scale(x[,y]?)定义2d缩放转换
scale(x,y,z)定义3d缩放转换：scaleX(x)、scaleY(y)、scaleZ(z)
rotate(angle角度)定义2d旋转。例如：rotate(45deg)旋转45°顺时针
rotate(x,y,z角度)定义3d旋转。rotateX(angle)、rotateY(angle)、rotateZ(angle)分别为沿着xyz轴的3d旋转
perspective(n)定义透视视图
matrix(x比例,y拉伸,x拉伸,y比例,x,y)比例为0-1
例如matrix(1,0,0,1,30,30,)等同于translate(30px;30px;)
matirx(sy,0,0,sy,0,0)等同于scale(sy,sy)
martirx(cosθ,sinθ,-sinθ,cosθ,0,0)。martirx(0,1,-1,0,0,)等同于rotate(90deg)
三、渐变
CSS定义两种渐变
①Linear Gradients线性渐变——向上下左右、对角方向
语法
background:linear-gradients(left,red,blue)默认从上至下（方向，颜色，颜色，颜色……），区分浏览器-o-、-moz-、-webkit-
background:linear-gradients(90deg,red,blue)（角度，颜色，……）
background:linear-gradients(left,rgba(),rgba())可以使用透明函数rgba
background:repeating-linear-gradients
Radial Gradients径向渐变——由他们的中心定义
语法：background:radial-gradient(center,shape size,start color,...,last color)
shape形状值：circle圆形、ellipse椭圆（默认值是ellipse）
closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner指定径向渐变的半径长度为从圆心到离圆心最远的角