title: css bubble chat slide up animation
body: <p>I'm trying to create chat animation using CSS only. So far, I have tried creating <a href="https://jsfiddle.net/vtj3awqg/1/" rel="nofollow noreferrer">this</a>. My question is how to hide a bubble when it's not their time to show up?</p>
  <pre><code>@keyframes slide {
    from {bottom: -20px}
    to {bottom: 0px}
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  </code></pre>
  <p>Also, I figured that this is not the best approach to create chat animation. I still haven't thought about how to hide the older bubble chat when the chat is getting longer. Does anyone know what's the best approach to create this animation but using CSS only?</p>