自定义动画

/* 自定义动画
            animation: name duration timing-function delay iteration-count direction fill-mode;
            */
            animation-name: run;/* 动画名称  绑定关键帧动画 */
            animation-duration: 1s;/* 动画执行时间  单位： s  ms   1s=1000ms */
            animation-timing-function: ease;/* 动画运动速度曲线 */
            /* 
                取值：
                    linear  匀速
                    ease  默认值
                    ease-in 以慢速开始
                    ease-out    以慢速结束
                    ease-in-out     以慢速开始和慢速结束
            */
            animation-delay: 1s;/* 动画的延迟时间 */
            /* 
                取值： s ms
                默认值：0
                允许负值  （-1  使动画立马开始， 但是跳过1s直接进入动画）
            */
            animation-iteration-count: 3;/* 规定动画的执行次数 */
            /* 
                取值：
                    n 数字
                    默认值  1
                    infinite  无限次播放动画
            */
            animation-direction: normal;/* 定义动画是否轮流反向播放 */
            /* 
                取值：
                    nomal   默认
                    alternat    动画轮流反向播放
                    alternate-reverse   从第一次就反向播放
            */
            animation-fill-mode: backwards;/* 动画结束之后现实的状态 */
            /* 
                取值：   
                    backwards  动画开始状态
                    both    动画开始或结束的状态
                    forward  动画结束的状态
            */
            animation-play-state:paused ;/* 动画的播放方式        暂停 */
            /* 
                取值：
                    paused      暂停
                    runing      运动
                用在hover里面效果更佳
            */