JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>
  </div>
</div>

SCSS

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;
  .bubble {
    position:absolute;
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: nowrap;
    &_text {
      background: yellow;
      padding: 8px;
      position: relative;
    }
  }
}

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    }
  
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
    }
  }