CSS属性组-动画、转换、渐变

一、动画

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
{
    %   {top:0px; left:0px; background:red;}
    % {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指定径向渐变的半径长度为从圆心到离圆心最远的角