顾名思义，打字机动画是一种看起来像打字动画的效果，就像被打字机打字一样。我们将不使用 JavaScript 而仅使用 HTML 和 CSS 创建此动画。
方法：为了实现打字机效果，我们将使用以下 CSS 属性。
- animation-timing-function ：我们需要以秒或毫秒为单位指定动画的时间，以便动画更快，看起来更完美。我们还需要指定步骤，使每个字母不是出现在一个单一的流程中，而是一个一个地出现在打字机中。在下面的代码中，我们使用 GeeksforGeeks 示例，因为 GeeksforGeeks 中的字母总数为 13，因此使用的步骤数为 13。
- overflow :为了让每个文本根据动画出现而不是一次全部显示， overflow: hidden在下面的代码中使用。
- white-space ：要在单行上获取动画white-space: nowrap被使用。
- border-color ：正如在下面的代码中看到的，边框颜色是从黑色动画的，太透明了，不能给动画一个闪烁的光标的真实触感，也可以使用除黑色以外的任何颜色。
- width ：要获得类似动画的输入，宽度从 0% 到 50% 进行动画处理（这可以根据文本高度/宽度或给定的文本间距而变化）。
示例：在本示例中，我们将使用上面定义的属性来创建打字机动画。
index.htm
Typewriter Effect
GeeksforGeeks
输出：
注意：对于其他更长或更短的文本，应在字体大小、步骤中进行所需的更改。文本和光标的动画时间也应相应更改。