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

1.3.1 Animation 属性介绍1）animation-name：名称

none ：无动画( 默认 )
String ：动画名称

2）animation-duration：时间

Time ：秒或毫秒(默认 0 )

3）animation-timing-function：缓动函数

ease ：逐渐变慢，等同于 cubic-bezier(.25,.1,.25,1) ( 默认 )
linear ：匀速，等同于 cubic-bezier(0,0,1,1)
ease-in ：加速，等同于 cubic-bezier(.42,0,1,1)
ease-out ：减速，等同于 cubic-bezier(0,0,.58,1)
ease-in-out ：先加速后减速，等同于 cubic-bezier(.42,0,.58,1)
cubic-bezier ：贝塞尔曲线，(x1,y1,x2,y2) 四个值指定于曲线上的点 P1 和 P2，所有值需在 [0,1] 区域内
steps([,[start|end]]?) ：把动画平均划分成 n等分 ，直到平均走完该动画
step-start ：等同于 steps(1,start)，把动画分成一步，动画执行时以左侧端点 0% 为开始
step-end ：等同于 steps(1,end)，把动画分成一步，动画执行时以右侧端点 100% 为开始

4）animation-delay：时延

Time ：秒或毫秒(默认 0 )

5）animation-iteration-count：播放次数

Number ：数值(默认 1 )
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实现的。观察多几次自动打字器，可发现其存在以下特点。