Streamlabs自定義CSS抽搐聊天動畫名稱和消息seperatly

Question

我想定製我的抽搐從Streamlabs聊天覆蓋，這樣的人的用戶名從左側動畫，而他們發送的實際消息動畫從右側。下面我粘貼了CSS，這是我需要的，Stream-labs完成了剩下的工作。控制文本動畫的主要位開始於第19行，並且#log>div{ 此外，對於長代碼抱歉，但您需要全部。

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

我很新的CSS和同樣想定製我的StreamLabs聊天，所以這個名字/徽章將被從消息不同的動畫。我花了一段時間才弄清楚，主要是因爲我開始的模板需要display屬性，#log .meta和#log .message分配給inline-block才能使動畫生效。在你的情況下，table-cell也支持動畫，所以不需要改變。

在第一個#log>div元素中，從兩個動畫屬性中刪除fadeInRight .3s ease forwards,。

在#log .meta（徽章+姓名），你想從左邊滑動，與價值slideInLeft .3s ease forwards;添加animation和webkit-animation性能。

對#log .message做同樣的操作，但用slideInRight替換slideInLeft除外。