css typing blink animation - html

Question

I have made a typing animation in CSS. I have an issue with the letter not showing up fully.
Trying to make "m" as one letter, Also animation to feel more natural. It needs to look like someone is typing.
need help to animate each letter in the "remirror" separately and make it look like someone is typing so each key comes in slightly off time.
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

If the word won't change you can try animating the content property of a pseudo-Element.
#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

Here is a crazy idea relying on background and box-decoration trick. It can also work with any kind of font-family:
#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>
To udnerstand the trick remove the overflow to see how the gradient behave with 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>