CSS动画是为您的网站访问者添加额外欢乐时刻的简单方法。即使是快速的动画效果也可以区分普通的静态网页和访问者会记住的体验。

在这篇文章中，我们将向您展示如何实现一种CSS动画效果，即文本键入动画。此效果将使您的屏幕文本看起来就像是用打字机或文字处理器键入的一样。

此效果适用于商业网站、自由职业者或个人网站、加载动画和许多其他用途。最重要的是，不需要JavaScript编程。所以，让我们开始吧。

如何在 CSS 中创建键入动画

为了提供键入文本的效果，本质上我们正在做的是创建一行文本，隐藏它，然后以逐步的方式显示它，以给人一种它正在被键入的错觉。这是从头开始的方法。

在文档中创建文本。

首先，让我们编写要动画的 HTML。我们将使用保存文本元素的类容器创建一个容器 div。在容器内，我们将放置一个段落。为本段指定键入的类，并添加所需的任何文本内容。

<div class="container">
  <p class="typed">This is a paragraph of typed text.</p></div>

在本例中使用了 p 元素，但您也可以使用任何包含文本的元素，例如 h1。

对文本进行动画处理以显示文字。

接下来，我们将使用 CSS 动画来实际添加键入效果。

在 CSS 中，将容器 div 设置为具有 display 属性的内联块。我还添加了一些其他属性来设置 div 内文本的样式。

.container{
  display: inline-block;
  font-family: "arial";
  font-size: 24px;}

将显示设置为内联块，使容器 div 的宽度由其中段落文本的宽度设置。

然后，我们将使用一些重要属性设置类型化元素的样式：

• 溢出：隐藏可确保文本在元素边缘之后不可见。
• 空白：nowrap 将文本保留在一行上。
• 宽度：0 隐藏动画开头的文本。动画将更改段落的宽度以显示文本。

到目前为止，CSS 如下所示：

.container{
  display: inline-block;
  font-family: "arial";
  font-size: 24px;}.typed {
  overflow: hidden;
  white-space: nowrap;
  width: 0;}

现在是有趣的部分：添加动画。在 CSS 中创建@keyframes规则，如下所示：

@keyframes typing {
  from { width: 0 }
  to { width: 100% }}

此规则将段落元素的宽度从 0（即不可见）更改为其父元素宽度的 100%。

接下来，我们将向 .typed 类添加一些额外的 CSS 属性：

• 动画：键入将我们制定的@keyframes规则分配给 .typed 类。
• 动画持续时间：1.5 秒使动画持续 1.5 秒。
• 动画定时功能：steps（30，结束）使动画以逐步方式播放，而不是平滑播放。这很重要，因为它创建了“类型化”效果。30 是动画采取的步骤数，这些步骤均匀分布，直到动画结束。
• 动画填充模式：向前可确保在动画完成后，段落元素保持 100% 宽度。否则，宽度将重置为 0。

到目前为止，CSS 如下所示：

.container{
  display: inline-block;
  font-family: "arial";
  font-size: 24px;}.typed {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing;
  animation-duration: 1.5s;
  animation-timing-function: steps(30, end);
  animation-fill-mode: forwards;}@keyframes typing {
  from { width: 0 }
  to { width: 100% }}

我们现在有足够的时间看到我们的动画在起作用。下面是我们编写的代码的结果：

根据文本的长度，您可能需要增加或减少动画的持续时间和步骤数，以使其看起来像您想要的那样。

添加光标。

到目前为止，我们的动画看起来相当不错，但是我们可以通过在效果中添加“光标”来使其更好，以真正传达文本正在被键入。

添加光标很简单：我们将使用段落元素的右侧边框，该边框随着段落元素宽度的扩展而移动。只需将右边框：2px 实心添加到您的 .typed CSS 块中，如下所示：

您可以根据自己的喜好调整边框宽度和颜色。

使光标闪烁。

要向光标添加闪烁效果，我们需要创建第二个称为闪烁的@keyframes规则，它将边框颜色设置为透明，然后将其更改为黑色，然后又恢复为透明。

@keyframes blinking {
  0% {border-right-color: transparent}
  50% {border-right-color: black}
  100% {border-right-color: transparent}}

我们将此@keyframes规则应用于我们的 .typed CSS 块。为了使事情更清晰，我将对闪烁和键入动画使用 CSS 动画速记。我还将闪烁的持续时间设置为一秒，并使其无限循环。

使文本居中。

最后，让我们通过居中动画来添加一些额外的风格。我将采用到目前为止的代码，并对容器进行一些小的调整：

• 我将容器的显示从内联块更改为网格。
• 我将添加声明放置项：容器的中心。
• 我还将容器的宽度设置为 350px。

这是我们最终得到的结果：

很酷，对吧？

添加 CSS 键入效果以取悦您的用户。

虽然这不是您想要在网站上的每一行文本上使用的东西，但简单的 CSS 打字效果可以让访问者参与到原本普通的副本中。尽管打字机如今可能不是技术的最前沿，但它们总会唤起一种酷炫的怀旧感。

因此，请尝试上述示例。像这样的打字效果相对容易实现，但它告诉访问者您的网站，因此您的业务，关心细节。