[css输入眨眼动画

Question

我已经在CSS中制作了打字动画。我有一个问题，这封信没有完全显示出来。尝试使“ m”成为一个字母，同时使动画更自然。它需要看起来像有人在打字。需要帮助分别为“反射镜”中的每个字母设置动画，并使其看起来像在打字，因此每个键的输入时间略有减少。

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;
  line-height:1.2em;
  height:1.1em;
  word-break: break-all;
  overflow: hidden;
  font-family: danub;
  animation:typing 10s linear forwards;
}

h1 span{
  padding-right:0.1em;
  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: 0;
  }
  to {
    max-width:100%;
  }
}


@keyframes blink-caret {
  to {
    background-image:linear-gradient(transparent,transparent);
  }
}

<h1><span>remirror text</span></h1>
<h1><span>another text here</span></h1>