Streamlabs custom CSS twitch chat animate name and message seperatly

Question

I want to customise my twitch chat overlay from Streamlabs so that the username of the person animates from the left while the actual message they send animates from the right. Below I have pasted the CSS which is all I need as Stream-labs does the rest. The main bit which controls the animation of the text starts on the 19th line with #log>div{ Also, sorry for the long code but you need it all.

h@import url(https://fonts.googleapis.com/css?family=Roboto:700);
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    text-shadow: 0 0 1px #000, 0 0 2px #000;
    background: $background_color;
    font-family: 'Roboto';
    font-weight: 700;
    font-size: $font_size;
    line-height: 1.5em;
    color: $text_color;
}

#log>div {
    animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delay forwards;
}

.colon {
    display: none;
}

#log {
    display: table;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 10px 10px;
    width: 100%;
    table-layout: fixed;
}

#log>div {
    display: table-row;
}

#log>div.deleted {
    visibility: hidden;
}

#log .emote {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 0.4em 0.2em;
    position: relative;
}

#log .emote img {
    display: inline-block;
    height: 1em;
    opacity: 0;
}

#log .message,#log .meta {
    vertical-align: top;
    display: table-cell;
    padding-bottom: 0.1em;
}

#log .meta {
    width: 35%;
    text-align: right;
    padding-right: 0.5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#log .message {
    word-wrap: break-word;
    width: 65%;
}

.badge {
    display: inline-block;
    margin-right: 0.2em;
    position: relative;
    height: 1em;
    vertical-align: middle;
    top: -0.1em;
}

.name {
    margin-left: 0.2em;
}

Answer 1

I'm very new to CSS and likewise wanted to customize my StreamLabs chat so the name/badge would be animated differently from the message. It took me a while to figure out, mostly because the template I started from needed the display property for #log .meta and #log .message assigned to inline-block for animations to work. In your case, table-cell also supports animations, so that doesn't need to be changed.

In the first #log>div element, remove fadeInRight .3s ease forwards, from both animation properties.

In #log .meta (badges + names), which you want to slide in from the left, add the animation and webkit-animation properties with the value slideInLeft .3s ease forwards;.

Do the same for #log .message, except replace slideInLeft with slideInRight.