Help with custom css

[Shieriker]

Does anyone knows how to change the "motion" between messages i want to do something like this https://twitter.com/sieusui/status/...jeXvnjhofwEhSlp3AkKW-iycRzAqwVAJJmW4GsmMUNUNY

An this is the one im trying to edit:
https://www.youtube.com/watch?v=IaHkOEiiOqU

This is the html and css code:

------- html---------

<div class="top-degrade"></div>

<!-- Imported animations -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<!-- item will be appened to this layout -->

<div id="log" class="sl__chat__layout"></div>

<!-- chat item -->

<script type="text/template" id="chatlist_item">

  <div data-from="{from}" data-id="{messageId}">

    <div class="meta" style="background-color: {color};">

      <span class="badges"></span>

      <span class="name">{from}</span>

    </div>



    <div class="message">

      <div class="container-message">

        {message}

      </div>

    </div>

  </div>

</script>



<div class="bottom-degrade"></div>

------- CSS---------
 
/* CHANGE FONT HERE */
@font-face {font-family: "Leles scribadoo";
  src: url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.eot");
  src: url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.eot?#iefix") format("embedded-opentype"),
  url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.woff") format("woff"),
  url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.ttf") format("truetype"),
  url("https://db.onlinewebfonts.com/t/5d1d278fc0fcd071acfd4ea880f1bcf6.svg#Lele's scribadoo") format("svg");
}



  /* END */
 
html, body {
    height: 100%;
    overflow: hidden;
}
 
body {
    color: #916E56 !important; /* CHANGE FONT COLOR */
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.6); /* TEXT SHADOW */
 
    font-family: 'Leles scribadoo', sans-serif !important; /* CHANGE THIS IF YOU CHANGED THE FONT */
}
 
#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }
/* ===== ANIMATION AND DURATION ===== */
/*IMPORTANT!! PUT THIS CODE IN THE HTML TO GET ACCESS TO ALL THE ANIMATIONS*/
/*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>  */
/*ANIMATIONS:  https://animate.style/  */
#log>div { animation: slideInUp 1s ease forwards, slideInUp 1s ease 5s forwards;}  /*<-----changue animations and durations here*/

.colon { display: none; }

#log {position: absolute; width: 100%; bottom: 0; left: 0; padding: 0 10px 10px;}

/* CUSTOMIZE MESSAGE */
#log .message {
        font-size: 72px; /* CHANGE MESSAGE FONT SIZE */
        margin: none;
        padding: 0px;
}
 
/* CUSTOMIZE NAME */
#log .name {
    font-size: 56px; /* CHANGE USERNAME FONT SIZE */
    color: #916E56; /* CHANGE NAME FONT COLOR */
}
 
/* TRY NOT TO CHANGE ANY OF THESE UNLESS YOU KNOW WHAT YOU'RE DOING */
/* YOU CAN ALWAYS GO BACK TO THE PASTEBIN TO START OVER. */
#log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
 
#log>div { position: relative; padding-top: 21px; margin-bottom: 10px; }
/* ===== ANIMATION AND DURATION ===== */
/*IMPORTANT!! PUT THIS CODE IN THE HTML TO GET ACCESS TO ALL THE ANIMATIONS*/
/*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>  */
/*ANIMATIONS:  https://animate.style/  */
#log>div { animation: slideInUp 1s ease forwards, slideInUp 1s ease 15s forwards;}  /*<-----changue animations and durations here*/



#log>div.deleted {
    visibility: hidden;
}
 
.meta {
    display: block;
}
 
.colon {
    display: none;
}
 
.badge {
    float: right;
    padding-left: 5px;
    height: 1em;
}
 
#log .emote {
    background-repeat: no-repeat;
    background-position: center;
    padding: 0.1em;
    background-size: contain;
}
 
#log .emote img {
    display: inline-block;
    height: 1em;
    opacity: 0;
    vertical-align: top;
}