动画的使用以及相关属性

一、动画使用步骤:1.定义动画 2.调用动画

1.定义动画的两种方式

1.1第一种:

1.2第二种

2.调用动画 animation: 动画名称 动画时长;(这两个属性值必须写,且取值不分先后顺序)

二、动画属性的基本语法:

animation: name duration timing-function delay iteration-count direction fill-mode;

animation:动画名称 动画时长 速度与曲线 延迟时间 重复次数 动画方向 执行完毕时的状态;

1.linear 匀速

2.delay 延迟时间(如果有两个时间,则第一个表示动画时长,第二个表示延迟时间)

3.重复次数 数字写几表示重复几次

4.infinite 无限循环

5.动画执行方向: reverse反方向运行 alternate;先正常的运行,再反方向运行

6.执行完毕的状态forwards 动画停留在状态结束的状态 backwards 动画停留在开始的状态-默认值

注意:如果有infinite无限循环,则这两个状态都无效

7.逐帧动画 steps(数字) 括号里面写几 就表示分几步走完这个动画(应用场景:精灵动画)

精灵动画制作步骤:1.准备显示区域 2.定义动画 3.使用动画

8.多组动画调用: animation:动画1,动画2...动画n;(中间用逗号隔开)

9.暂停动画 通常配合:hover一起使用

```animation-play-state: running(运动)|paused(暂停);