html - css 打字闪烁动画

Question

我在 CSS 中制作了一个打字动画。我有一封信没有完全显示的问题。
试图将“m”作为一个字母，也让动画感觉更自然。它需要看起来像有人在打字。
需要帮助分别为“remirror”中的每个字母设置动画，并使其看起来像是有人在打字，因此每个键都在稍微关闭时间。

https://codepen.io/shahil/pen/ZEGwMxQ

@font-face {
  font-family: danub;
  src: url(https://cdn.getforge.com/remirror.getforge.io/1585586993/danub.ttf);
}

@-webkit-keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 16.3em;
  }
}

@-moz-keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 16.3em;
  }
}

@-webkit-keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

@-moz-keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

body {
  font-family: Consolas, monospace;
}

h1 {
  font-size: 3rem;

  width: 16.3em;
  white-space: nowrap;
  overflow: hidden;
  color: #000;
  border-right: 0.1em solid black;
  font-family: danub;
  -webkit-animation: typing 17s steps(30, end),
    /* # of steps = # of characters */ blink-caret 1s step-end infinite;
}

<h1>remirror</h1>

Answer 1

如果单词不会改变，您可以尝试为伪元素的内容属性设置动画。

@font-face {
  font-family: danub;
  src: url(https://cdn.getforge.com/remirror.getforge.io/1585586993/danub.ttf);
}


/* For the caret */

h1:before {
  content: '';
}


/* For the word */

h1:after {
  content: '';
  font-family: danub;
  border-right: 0.1em solid black;
  animation: typing 3s steps(8) forwards, blink-caret 1s step-end infinite;
}

@keyframes typing {
  0% {
    content: ''
  }
  12.5% {
    content: 'r'
  }
  25% {
    content: 're'
  }
  37.5% {
    content: 'rem'
  }
  50% {
    content: 'remi'
  }
  62.5% {
    content: 'remir'
  }
  75% {
    content: 'remirr'
  }
  87.5% {
    content: 'remirro'
  }
  100% {
    content: 'remirror'
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

<h1></h1>