CSS text animation issue

[SelfDestructor]

Hello!

I’m currently messing around with CSS text animations for the chat as I want it to have a “typewriter” effect but I’ve hit a issue neither me or my friend friend can figure out.

I have gotten the animation to work but it only works on the first line, which is "Chat: Loading emotes and badges…"
Every line after it pops in like normal.

I have tried to put it under different classes but only #chat_box seems to work.

This is the CSS I’m using for the animation:

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

#chat_box {
white-space: nowrap;
-webkit-animation: typing 3s steps(60, end);  } 

Am I doing something completely wrong or is it a limitation of the chat?

[nyanspark]

Your animation is applying to the whole chat_box, try applying to chat_line.

[SelfDestructor]

I have tried it. The animation doesn’t work at all when it’s in .chat_line. Only #chat_box plays the animation