css动画

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