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

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

@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>

Answer 2

这是一个依靠背景和盒子装饰技巧的疯狂想法。它还可以与任何类型的字体系列一起使用：

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

h1 {
  font-size: 3rem;
  height:1.1em; /* Same a gradient height */
  line-height:1.3em; /* to rectify the oveflow (bigger than the height) */
  word-break: break-all; /* This is the most important trick */
  overflow: hidden; /* hide the line break */
  font-family: danub;
  animation:typing 10s linear forwards;
}

h1 span{
  /* padding same as gradient width */
  padding-right:0.1em;                    /* width height */
  background:linear-gradient(red,red) right/ 0.1em 1.1em    no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  animation:blink-caret 0.5s infinite forwards;
}

@keyframes typing {
  from {
    max-width: 1em;
  }
  to {
    max-width:100%;
  }
}
@keyframes blink-caret {
  to {
    /* we change the gradient to transparent */
    background-image:linear-gradient(transparent,transparent);
  }
}

<h1><span>remirror text</span></h1>
<h1 style="font-family:arial"><span>another text here</span></h1>

要了解技巧，请移除溢出以查看渐变在 box-decoration 中的表现：

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

h1 {
  font-size: 3rem;
  height:1.1em; /* Same a gradient height */
  line-height:1.2em; /* to rectify the oveflow */
  word-break: break-all; /* This is the most important trick */
  font-family: danub;
  animation:typing 25s linear forwards;
  border:1px solid;
}

h1 span{
  padding-right:0.1em;                    /* width height */
  background:linear-gradient(red,red) right/ 0.1em 1.1em    no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

@keyframes typing {
  from {
    max-width: 1em;
  }
  to {
    max-width:100%;
  }
}

<h1><span>remirror text</span></h1>