CSS 动画一站式指南( 四 ) _生活百科

infinite ：无限次

6）animation-direction：轮流反向播放(播放次数为一次则该属性无效果)

normal ：正常播放( 默认 )
alternate ：轮流反向播放，奇数次数正常播放，偶数次数反向播放

7）animation-play-state：播放状态

running ：正在播放( 默认 )
paused ：暂停播放

8）animation-fill-mode：播放前后其效果是否可见

none ：不改变默认行为( 默认 )
backwards ：在时延所指定时间内或在动画开始前应用开始属性( 在第一个关键帧中定义 )
forwards ：在动画结束后保持最后一个属性( 在最后一个关键帧中定义 )
both ：向前和向后填充模式都被应用

CSS 中动画分为两种，关键帧动画和逐帧动画。关键帧动画是将人为定义好的每一帧的状态串联成一个动画，需要通过animation和@keyframes声明。逐帧动画的声明较为简单，使用一张逐帧长图然后配合animation-timing-function: steps()来完成。
逐帧动画的声明步骤一般如下：

准备一张 逐帧长图 ，该图像包含动画效果的每一帧且每帧宽高必须一致
在 steps() 里声明逐帧长图及其展示方式
在指定节点中声明 animation 调用动画

关键帧动画的声明步骤一般如下：

在 @keyframes 里声明动画名称和动画每个关键帧的状态
在指定节点中声明 animation 调用动画

关键帧动画声明示例：
@keyframes animation-name {from {}to {}}/* 或 */@keyframes animation-name {p1 {}p2 {}p3 {}}关键帧的取值必须是 from 、 to或Percentage。from可用0%代替， to可用 100%代替，若开始或结束的关键帧无对应的状态，可不用声明 from或to。0%的%不能省略，否则关键帧解析会失败。通过animation-fill-mode属性设置动画结束后的样式。
1.3.2 Animation 动画实践1）自动打字器
很多在线编辑器网站都有一些自动打字的效果，例如CodePen 。很多同学都以为是JS实现的效果，其实查看 Chrome Devtools发现是纯CSS实现的。观察多几次自动打字器，可发现其存在以下特点。