Typewriter + CSS transitions (Harlowe)

marisemirai

New to Twine, so forgive me if I'm doing a stupid.

I'm trying to get a typewriter effect on one passage. Right now I have this in my stylesheet:

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

And in the passage,

{(live:200ms)[<p class="css-typing">The Potato Club.</p>(stop:)]}

The issue is that it appears to refresh about halfway through before restarting the animation, and for the life of me I cannot understand why. Any solutions?

prof_yaffle

I've been playing around with your code and I haven't been able to see any reason why the animation is restarting.

I did find that increasing the value of the live macro to at least 750ms stops it from happening. I just don't know why.