css печатать анимацию мерцания

Question

Я сделал анимацию ввода в CSS. У меня проблема с тем, что письмо не отображается полностью. Попытка сделать «м» одной буквой, а также анимацию, чтобы чувствовать себя более естественно. Это должно выглядеть, как будто кто-то печатает. нужна помощь, чтобы анимировать каждую букву в «повторном зеркале» отдельно, чтобы она выглядела так, как будто кто-то печатает, поэтому каждая клавиша приходит немного в нерабочее время.

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);
}

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>

Чтобы уловить трюк, удалите переполнение, чтобы увидеть, как градиент ведет себя при оформлении коробки:

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

Answer 2

Если слово не изменится, вы можете попробовать анимировать свойство 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>