css3-animation

    1:属性选择器
    2:结构伪类选择器
    3:伪元素选择器
    4:2d转换
    5:动画
    6:3d转换
    7:浏览器私有前缀

css3动画:animation;
    1:相对于过渡,动画可以实现更多的控制,连续自动播放等效果;动画更强大;
    2:需求:页面一打开,盒子就从左边走到右边;
    3:使用:
        1:定义动画;
            用keyframes定义动画;(类似于定义类选择器)
            @keyframes 动画名称{
                0%{//动画序列
                    transform: translateX(0px);
                }

                100%{//动画序列
                    transform: translateX(1000px);
                }
            }
        2:调用动画;
            animation-name:动画名称;
            animation-duration:持续时间;(0.3/1/2)
    4:注意:
        1:可以改变任意多的次数;
            1:定义每次的位置状态关系;
            2:里面的百分比就是总时间的划分;
            3:里面的百分比得是整数;
        2:可以使用百分比规定变化的时间;或者from-->to或者0%-->100%
    5:动画属性:
        @keyframes
        animation:所有动画的简写
        animation-name:动画名称
        animation-duration:动画持续时间
        animation-timing-function:速度曲线,默认ease ,linear step(n)
        animation-delay:何时开始,默认0s
        animation-iteration-count:播放次数infinite:无限
        animatoon-direction:是否反方向,默认是normal,alternate逆播放;
        animation-fill-mode:动画结束后的状态,保持:forwards;回到起始:backwards(默认)        

        animation-play-state:是否正在运行或者暂停,默认是running,还有paused
    6:综合使用:
        animation:名称 持续时间 速度曲线(ease) 延迟时间(0s) 播放次数(infinite) 是否反向(alternate) 结束后的状态(forwards) ;
    7:热点图实现:
        opacity:透明度

    8:animation-timing-function:属性详解;
        1:linear:动画从头到尾速度相同,匀速;
        2:ease:默认;动画先低速开始,然后变快;
        3:ease-in:低速开始
        4:ease-out:低速结束
        5:ease-in-out:低速开始和结束
        6:steps();指定时间函数中间隔数量(步长):意思是分几步来完成所需要的动画;
        可以做打字机效果:
    9:添加多种动画:两种动画用逗号个隔开
        animation: bear .8s steps(8) infinite,move 5s linear forwards;