7.19关键帧动画

关键帧动画需要使用CSS规则事先规划好；

@keyframes动画名称{

                from/0%{}

                to/100%{}

        }

1、animation-name：指定动画名称； 2、animation-duration：指定动画执行的时长；

3、animation-timing-function：指定关键帧动画的缓动效果；

        取值：ease（默认值）。 linear，匀速。......

4、animation-delay：指定关键帧动画的延迟时长，单位s/ms；

5、animation-iteration-count：指定关键帧动画重复执行的次数，

        默认：1         n取具体数值表示关键帧重复n次（例如5次）

        infinite，表示关键帧动画重复执行无数次；

6、animation-direction：关键帧动画的执行方向，

        normal（默认值）从第一帧执行到最后一帧；reverse，反向执行最后一帧到第一帧；

        alternate，往复执行，第一帧到最后一帧再从最后一帧到第一帧，往复执行；

        alternate-reverse，反向往复执行。

7、animation-fill-mode：指定关键帧动画起点和终点的模式，

8、animation-play-state:指定关键帧动画的执行状态。

        取值：running：（默认值）设置关键帧动画执行；

                   paused:设置关键帧动画暂停。

可以使用animation属性完成上述属性的赋值：

                例：animation:ball 3s ease 0s 3 normal both running