Typewriter-style CSS test

I couldn’t get it to work for me. Nothing’s happening.
I entered the HTML into a rich text component. Assigned the css class to this component. And I copied the code below into the css input field for app Appearance.
Did I miss a step?

.writer {
display: inline-block;
overflow: hidden;
border-right: .07em solid black;
white-space: nowrap;
letter-spacing: .03em;
line-height: 1.2;
padding: 0.003em 0;
width: auto;
max-width: 0;
typing 2.5s steps(40, end) forwards,
blink-caret .75s step-end infinite;

@keyframes typing {
from { max-width: 0; }
to { max-width: 100%; }

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: black; }

Reference: CSS Library

1 Like

nevermind. I got it to work by editing the text that came before the CSS.

This part:

It was incomplete.

1 Like

Not sure what you mean by “incomplete”. Can you point out that part and how you changed it so we can make a correction in the library?

hi @ThinhDinh. Maybe incomplete was the wrong word… Usually, we can copy the codes in the Library as is and it would work but in this case I had to close off the top text before it could work (see image below).

I don’t know code so I didn’t recognize that it had to be either omitted or edited.

In the end I did it like this because I noticed you guys usually write this way:


The line that starts with /* is a comment line. You could have simply left that line out :slight_smile:


Yes :laughing:, I only realized that after it didn’t work. I don’t know about the code language and there’s usually some string so I figured it was all good, lol.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.