Stream Elements - custom chat CSS for smooth chat animations

/* Paste in Custom CSS box on the OBS Browser Source properties */
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

/* Animation Setup - Where it says "29s", set this to your "Messages fade after" time minus 1 second. */
/* If you have "Show messages permanently turned on in Stream Elements, remove the comma and everything after except for the semi-colon */
.chat-line {
    animation: fadeInUp .4s ease forwards, fadeOutUp 0.5s ease 29s forwards;
}

@keyframes fadeInUp {
    from { top: 72px; opacity: 0; }
    to   { top: 0px;  opacity: 1; }
}

@keyframes fadeOutUp {
    from { top: 0px;   opacity: 1; }
    to   { top: -72px; opacity: 0; }
}