动画的一些常见写法

动画 animation  是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果

        相比较过度，动画可以实现更多的变化，更多的控制，连续自动播放的效果

制作动画分两步：1、先定义动画  2、再调用动画

 使用 Keyframe 定义动画

    Keyframe  动画名称{

        0%{

            width：100px

        }

        100%{

            width：200px

        }

    }

 动画序列：

    1、0% 是动画的开始 100%是动画的完成 这种的规则就是动画序列

    2、在@Keyframe中规定某项css样式，可以创建当前样式逐渐改为新样式的效果

 调用动画：

    div{

        调用动画

        animation-name：动画名称

        持续的时间

        animation-duration：持续的时间

    }

动画的常见属性:

            animation-timing-function        速度曲线  

            animation-delay                  动画何时开始 默认是0

            animation-iteration-count        播放次数  默认是1 还有

            animation-direction              是否在下一周期逆向播放  默认normal  alternate逆向播放

            animation-play-state             动画是否正在运行或暂停 默认running pause

            animation-fill-mode              动画结束后 保持forwards  回到起始位置backwards

简写：animation:动画名称 持续时间、运动曲线、何时开始、播放次数、是否反方向、动画起始或者结束状态