How to animate a container that moves from top to bottom and again it should not appear from top to bottom but continue from bottom to top

For context check this https://www.intercom.com/ url and navigate to People are talking container where the container moves to left to right. I need the same animation for my code but I unable to do that. Here's the url for https://codesandbox.io/s/angry-elion-94spb?file=/src/styles.css for my codesandbox code.

Solution 1:

Change the move animation to this:

@keyframes move {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

Your previous code is going from down to up, then instantly resetting to down. This code goes from down to up, then back down again, and repeats.