css typing blink animation

user_2599086 0
Viewed 197

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>

css-animations css-transitions css html
2 Answers

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>

user_71483910

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>

user_86203330
Related