How To Make Your Text Have A Typewriter Effect
Wednesday, 5 July 2017 07:22 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.
For example:
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:)]}
For example:
.css-typing {
width: 30em;
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; }
from { width: 0; }
@-webkit-keyframes type {
from { width: 0; }
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:)]}