Typewriter-style CSS test

Ask for Help
1

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;
animation:
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

2

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

This part:
//AND HERE IS THE CSS

It was incomplete.

3

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?

4

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).

image
image334×816 33.5 KB

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:

image

5

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

6

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.