Page 245 - css揭秘

@keyframes typing {
from { width: 0 }
}

h1 {
width: 7.7em; /* 文本的宽度 */
animation: typing 8s;
}

代码看起来非常合理，对吧？但我们在图 8-23 中可以看到，它产生的
结果简直就是车祸现场，跟我们想要的打字效果一点关系也没有。

你可能已经猜到问题出在哪儿了。首先，我们忘了用 white-space:
nowrap; 来阻止文本折行，因此文本的行数会随着宽度的扩张不断变化。其
次，我们忘了加上 overflow: hidden;，所以超出宽度的文本没有被裁切
掉。不过，当我们修复了这两个小问题之后，真正的大问题才会浮出水面
（参见图 8-24）。

„ 最明显的问题是整个动画是平滑连贯的，而不是逐字显现的。
„ 另一个不那么明显的问题是，目前我们已经用 em 单位指定了宽度，
图 8-23 虽然它比像素单位要好一些，但仍然不够理想。这个宽度为什么是
我们尝试打字动画的第一步，完 7.7 ？我们是怎么算出来的？
全没有模拟出打字的感觉
我们可以用 steps() 来修复第一个问题，就像“逐帧动画”和 “闪烁效
果”中所做的那样。但不幸的是，我们所需要的步进数量是由字符的数量来
决定的，这显然是很难维护的，而且对于动态文字来说更是不可能维护的。
不过，我们稍后将看到，可以用一小段 JavaScript 代码来把这件事情自动化。

第二个问题可以通过 ch 单位来缓解。这个 ch 单位是由 CSS 值与单位
（第三版）（http://w3.org/TR/css3-values）规范引入的一个新单位，表示“0”
图 8-24
字形的宽度。它应该是最不为人知的一个新单位，因为在绝大多数场景下，
我们的第二次尝试已经相当接近
了，但还差那么一点 我们并不关心 0 这个字符显示出来到底有多宽。但对等宽字体来说，这是个
例外。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的。因
此，如果我们用 ch 单位来表达这个标题的宽度，那取值实际上就是字符的
数量：在这个例子中就是 15。

我们把上面的这些想法综合起来：

@keyframes typing {
from { width: 0; }
}

h1 {
width: 15ch; /* 文本的宽度 */
overflow: hidden;
white-space: nowrap;
animation: typing 6s steps(15);
}

214 第 8 章 过渡与动画

඀ࠡ JOEC