<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打字机效果</title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
.line {
width: 674px;
border-right: 2px solid #eee;
font-size: 28px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.animation {
animation: grow 4s steps(44) 1s normal both,
blink 0.5s steps(44) infinite normal;
}
@keyframes grow {
from {
width: 0;
}
to {
width: 647px;
}
}
@keyframes blink {
from {
border-right-color: #eee;
}
to {
border-right-color: #222;
}
}
</style>
</head>
<body>
<p class="line animation">
Animation typewriter style using css steps()
</p>
</body>
</html>
这个特效里面我们可以看到用到了CSS动画animation，有个控制时间的属性timing-function。
它的取值中除了常用到的 贝塞尔曲线 (linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))以外，还有个让人比较困惑的 steps() 函数。steps(n,start/end) 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。
# steps 有两个参数
第一个肯定是分几步执行完
第二个有两个值
start第一帧是第一步动画结束end第一帧是第一步动画开始
# W3C的解释:
- steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；
- 第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。
我们看我们小人的例子，当为start时，我们看到的是视觉动画的1/6的末状态。会跳帧不连续。我们会想了，我们直接把这个动画 的第一帧写在background-position: -0 0;不就可以了么，但是这个想多了。因为动画开始执行的时候我们基本是看不到这个的变化的，而且重复开始之后就不再起作用了。（上边的人里有这个属性，我 们是看不到第一帧的）
当指定跃点为 end，动画则在每个计时周期的终点发生阶跃（即图中 空心圆 → 实心圆 ）。 由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（3s），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3