How To Make Your Text Have A Typewriter Effect

[giangtranguyen]

Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.

For example:

.css-typing {
width: 30em;

white-space: nowrap;

overflow: hidden;

-webkit-animation: type 5s steps(75, end);

animation: type 5s steps(75, end);

}

 

@keyframes type {
from { width: 0; }

 

@-webkit-keyframes type {
from { width: 0; }

}

In order for it to work, you need to copy and paste the code into the passage that you want to have the typerwriter effect.

For example:

{(live:750ms)[<p class="css-typing">Haikyuu!!</p>(stop:)]}