CSS动画

1.1 2D、3D（transform）

2D转化值：

1translate();根据给定的left(x轴)和top（y轴）参数，移动元素。

例： div{        transform:translate(50px,50px)    }

2.rotate();使元素顺时针旋转给定的角度。正数顺时针，负数逆时针，单位（deg）。

3.scale();根据宽度（x轴），高度（y轴），缩放图片尺寸（从图片中心放大缩小）

例：transform：scale(2,4);即宽度放大2倍，高度放大4倍

4.skew();根据给定的水平线（x轴）和垂直线（y轴）参数，元素翻转（拉扯）给定的角度

3D转换

属性值：rotateX();围绕x轴根据角度旋转多少角度       rotateY();围绕y轴根据角度旋转多少角度

1.2 CSS过渡（transition）(即动画过程)

transition-property:width;          动画执行效果作用体transition-duration:1s;             动画执行时间transition-timing-function:linear;  动画效果transition-delay:2s;                动画推迟时间

transition-timing-function包含的属性值：

linear       匀速ease         慢速开始——快速——慢速结束ease-in      慢速开始ease-out     慢速结束ease-in-out  慢速开始和慢速结束

简写：

transition：width 1s linear 2s

1.3 CSS3动画（@keyframes）

例:第一第二步    @keyframes myFirst{        0%{            background:red;        }        50%{            background:blue;        }        100%{            background:black;        }    }或：    @keyframes myFirst{        from{            background:red;        }        to{            background:blue;        }    }第三第四步：选择器{animation:myFirst(动画名) 5s}

animation属性：

1.name;2.时间；3.执行效果；4.推迟时间5.animation-iteration-count:播放次数    ①. n:次数，默认为1    ②. infinite:无限循环6.animation-direction：是否逆向播放    ①. normal:正常播放（默认）    ②. alternate：轮流逆向播放7.animation-play-state:规定动画正在播放还是暂停    ①. paused:动画已暂停    ②. running：动画正在播放

简写：

animation:myFirst 5s linears 2s infinite alternate