How can I get my chat to animate from right to left when someone talks?

[p0rtal]

Looking to find a way to animate the text on my chat so that it animates right to left when a new message is typed every time.

[night]

.chat_line {
    animation: slide-left 0.4s ease;
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}