Infinite bubble loop with CSS and set z-index

I have a problem, when infinite my bubble the text always in front of bubble. Here is my code

.main {
  background: green;
  width: 400px;
  height: 200px;
  position: relative;

.bubble {
    animation-duration: 2.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    white-space: nowrap;

.bubble_text {
    background: yellow;
    padding: 8px;
    position: relative;

@keyframes slidein {
    from {
      bottom: 8px;
      right: 36px;
      width: 0;
    to {
      bottom: 8px;
      right: 28px;
      width: 160px;
<div class="main">
  <div class="bubble">
    <div class="bubble_text">Hello world hello</div>

how to solve the bubble (yellow color) so that its position is fixed when infinite from keyframes. and the text can be in the back position when the bubble closes?

Read more here:

Content Attribution

This content was originally published by dedi wibisono at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: