<ul class="rounded-messages reveal-messages messages-width-medium msg-animation-fast">
  <li class="left">Hello!</li>
  <li class="time"><strong>Yesterday</strong> 12:25 pm</li>
  <li class="right-msg">Hey, how are you?</li>
  <li>I'm doing well</li>
  <li>What about you?</li>
  <li class="right-msg">Hardy har har.</li>
  <li class="right-msg"><img src="https://tse4.mm.bing.net/th?id=OIP.Ma51851cded2f1d4bf2da6ff1e98df912o0&pid=15.1">I'm doing great! ;)</li>
  <li class="right-msg">LOL</li>
   <li class="time"><strong>Yesterday</strong> 3:44pm</li>
  <li>Heck, yea! FOOTBALL!</li>
  <li>😁</li>
</ul>
<br/><br/>

$left-bg: #E3E2DF;
$left-color: #292929;
$right-bg: #27AE60;
$right-color: #F8F8F8;
$time-color: #555555;


body { padding: 0px; margin: 0px; }


.messages-width-small { width: 300px; }
.messages-width-medium { width: 400px; }
.messages-width-large { width: 500px; }
.messages-width-full { width: 100%; }



/* Basic List Styling */
ul.rounded-messages 
{
  list-style: none;
  display: inline-block;
  overflow: hidden;
  font-size: 16px;
  padding: 10px;
}


/* Animation */
@keyframes message-reveal-animation
{
  from
  {
    opacity: 0;
    margin-top: 40px;
  }
  to
  {
    opacity: 1;
    margin-top: 10px;
  }
}
ul.rounded-messages.reveal-messages li
{
  visibility: hidden;
}
ul.rounded-messages.msg-animation-superfast li.msg-visible,
ul.rounded-messages.msg-animation-fast li.msg-visible,
ul.rounded-messages.msg-animation-slow li.msg-visible,
ul.rounded-messages.msg-animation-normal li.msg-visible,
ul.rounded-messages li.msg-visible
{
  animation: message-reveal-animation;
  animation-duration: 0.3s; /* Default Animation Length */
  animation-iteration-count: 1;
  visibility: visible
}
ul.rounded-messages.msg-animation-superfast li.msg-visible
{
  animation-duration: 0.2s; /* Super Fast Animation Length */
}
ul.rounded-messages.msg-animation-slow li.msg-visible
{
  animation-duration: 0.5s; /* Slow Animation Length */
}


/* Message Bubbles */
ul.rounded-messages li 
{
  position: relative;
  clear: both;
  display: block;
  height: auto;
  width: auto;
  max-width: 50%;
  word-wrap: break-word;
  word-break: keep-all;
  font-family: sans-serif;
  text-align: left;
  line-height: 1.5em;
  margin: 2px 10px;
  padding: 10px;
  cursor: default;
  border-radius: 15px;
}



/* Left Message Bubble */
ul.rounded-messages li:not(.right-msg),
ul.rounded-messages li.left-msg
{
  float: left;
  color: $left-color;
  background: $left-bg;
}

ul.rounded-messages li:not(.right-msg)::before,
ul.rounded-messages li.left-msg::before
{
  /* Left Message Bubble Tail */
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  border-top: 15px solid $left-bg;
  border-left: 15px solid transparent;
}


/* Right Message Bubble */
ul.rounded-messages li.right-msg
{
  float: right;
  color: $right-color;
  background: $right-bg;
}

ul.rounded-messages li.right-msg::before 
{
  /* Right Message Bubble Tail */
  content: "";
  position: absolute;
  bottom: 5px;
  right: -10px;
  border-bottom: 15px solid $right-bg;
  border-right: 15px solid transparent;
}


/* Bubble with image */
ul.rounded-messages li img 
{
  display: block;
  max-width: 100%;
  border-radius: 5px;
  margin-bttom: 5px;
}


/* Bubble with no tail */
ul.rounded-messages li.no-tail::before,
ul.rounded-messages li.time::before
{
  content: "";
  display: none;
}


/* Time Stamp */
ul.rounded-messages li.time
{
  width: 100%;
  max-width: 100%;
  background: transparent;
  margin: 0px;
  font-size: 12px;
  text-align: center;
  color: $time-color;
}



@media screen and (max-width: 500px)
{
  /* Fit the screen for all chats */
  ul.rounded-messages,
  .messages-width-large,
  .messages-width-medium,
  .messages-width-small
  {
    width: 100%;
    display: block;
  }
}

(function(){
  window.addEventListener('load', function(){
    // Get all messages 
    var messages = document.querySelectorAll('ul.rounded-messages.reveal-messages li');
    
    // Only try and show messages if some were found 
    if (messages.length > 0)
    {
      revealMessages(messages);
    }
  });
  
  
  /**
   * Function.....: Reveal Messages
   * Author.......: Michael Rouse
   * Parameters...: messages - the list of messages to display 
   * Description..: Displays messages one at a time 
   */
  function revealMessages(messages)
  {
    // Set static variable to remember what message number was last displayed 
    revealMessages.msg = (revealMessages.msg === undefined) ? 0 : revealMessages.msg;
    
    if (revealMessages.msg < messages.length)
    {
      // Set AnimationEnd Event Listener, to load the next message when this one finishes 
      (messages[revealMessages.msg]).addEventListener('animationend', function(){
        revealMessages(messages); // Reveal the next message
      });
      

      // Reveal the message if it is not already visible 
      if (!(messages[revealMessages.msg]).classList.contains('msg-visible'))
      {
        // Make sure there is a next message to reference 
        if (revealMessages.msg < (messages.length - 1))
        {
          // Remove the tail if this message is on the right, and the next message is on the right, OR if it a left message, and the next message is a left message
          if ( ((messages[revealMessages.msg]).classList.contains('right-msg') && (messages[revealMessages.msg+1]).classList.contains('right-msg')) || 
               (!(messages[revealMessages.msg]).classList.contains('right-msg') && !((messages[revealMessages.msg+1]).classList.contains('right-msg') || (messages[revealMessages.msg+1]).classList.contains('time'))) 
              )
          {
            (messages[revealMessages.msg]).classList.add('no-tail'); // No tail on this message
          }
        }
         
        // Show the message 
        (messages[revealMessages.msg]).classList.add('msg-visible');  
      } // End if 
      
      // Advance the message counter
      revealMessages.msg++;
    }
    
  } // End revealMessages()
}());