JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner">
  <p class="text1">Lorem ipsum dolor sit amet 1</p>
  <p class="text2">Lorem ipsum dolor sit amet 2</p>
  <p class="text3">Lorem ipsum dolor sit amet 3</p>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.banner {
  width: 300px;
  height:250px;
  border: 1px solid #ccc;
  background: #fff;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -125px 0 0 -150px;
  font-family: arial;
}

p {
  position:absolute;
  width: 100%;
  font-size: 20px;
  text-align: center;
  top: 100px;
}

.text1 {
  animation: fadeOutRight 1s 3s forwards;
}
.text2 {
  animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
  animation: fadeInLeft 1s 8s both;
}

@keyframes fadeInLeft {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}
@keyframes fadeOutRight {
  0% { transform: translateX(0px); opacity: 1; }
  100% { transform: translateX(100px); opacity: 0; }
}