自定义动画

1. 自定义动画

        用于复杂的动画制作，比如： 行人走路，说话，眨眼睛，打斗。。。。

        2. 如何使用自定义动画

        2-1. 定义关键帧

        @keyframes 关键帧的名称

        {

            //开始状态 from等价于0%

            from {}

            //中间状态 1~99%

            。。。。。。

            //结束状态 to等价于100%

            to {}

        }

        2-2. 执行动画

        animation: 关键帧的名称 [...]+

        animation-name： 动画名称

        animation-duration： 动画持续时间

        animation-timing-function： 缓动函数

        animation-delay： 动画延迟执行的时间

        animation-iteration-count： 循环次数

            默认值：1，infinite： 无限循环

        animation-direction： 是否反向运动

            normal： 默认，正常方向

            reverse： 反方向运行

            alternate： 动画先正常运行再反方向运行，并持续交替运行

            alternate-reverse： 动画先反运行再正方向运行，并持续交替运行

        animation-fill-mode： 动画时间之外的状态

            none： 默认值。不设置对象动画之外的状态

            forwards： 设置对象状态为动画结束时的状态

            backwards： 设置对象状态为动画开始时的状态

            both： 设置对象状态为动画结束或开始的状态

        animation-play-state： 设置对象动画的状态

            running： 运动

            paused： 暂停