[老来学前端] 打字机效果

前言

之前在 openAI 官网 中看到一个打字机动画效果不错，自己参考网上的例子，逐步的实现。

演示

点击查看【codepen】

代码重点详解

等宽字体 和 width 使用 ch 为长度单元

配合等宽字体 monospace ，width 以 ch 单位改变，就可以逐个字的显示。后续加上 animation ，就有了打字机的效果。

keyframe 0% 和 100% 在同一个位置

如果 0% 和 100% 设置同一个值，且设置在同一个keyframe中，默认已经有 alternate 的效果了。同时 steps 帧数，其实就是单侧动画的帧数。（正常情况是 steps 是整个动画的帧数）

@keyframes typing {
    0%, 100% {
        width: 0ch;
    }
    45%, 55% {
        width: 10ch;
    }
}

animation: typing 4s .5s steps(11), jump-none) forwards 1;  
/* 其实整个动画下来是 22 步的 */

animation steps jump-none 使用

div span {
  width: 0ch;  
}


animation: typing 4s .5s steps(11), jump-none) forwards 1;  

robinZhang 有10个字符，但是需要切分成 11格 动画，同时使用 jump-none，保证了 第一帧和最后一帧都不会跳过。
这样设计的前提：

1. 第一帧都是从 无 即 0ch 出现的
2. 动画整体的逻辑是 一个个字体出现，之后再停顿，再一个个字体的消失，所以中间停顿的时候，是最大的长度（10ch）

对比 jump-none, jump-start, jump-end, jump-both 会在其他的文章中

总结

animation 已经是很多浏览器和现代网站的支持了，如果想页面的效果好，还是需要对此进行了解。