How to make text slider with animation?

1

I am having a slider which shows one text at one time , I want to show three text ,with animation , previous text which is going up look blur and coming text look bold

<style>
#slider .slide{
  width: 500px;
  height: 150px;
}

#slider {
  width: 500px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
  font-size: 1.2em;color:#f9ca0e;
}
#slider h3{font-size:70px;}
#slider .container {
  position: relative;
  bottom: 0;
  right: 0;
  animation: slide-animation 20s infinite;
}
#slider .slide {
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px;
}
@media (min-width:992px){#slider, #slider .slide{width:auto;}
#slider h3{font-size:50px;}
 }
/* [ANIMATION] */
@keyframes slide-animation {
  0% { 
    opacity: 0;
    bottom: 0;
  }
  11% {
    opacity: 1;
    bottom: 0; 
  }
  22% { bottom: 100%; }
  33% { bottom: 100%; }
  44% { bottom: 200%; }
  55% { bottom: 200%; }
  66% { bottom: 300%; }
  77% { bottom: 300%; }
  88% {
    opacity: 1;
    bottom: 400%; 
  }
  100% {
    opacity: 0;
    bottom: 400%;
  }
}
</style>
<div id="slider">
      <div class="container">
        <div class="slide">
          <h3>Hostinger</h3>
        </div>
        <div class="slide">
          <h3>HostGator</h3>
         </div>
          <div class="slide">
          <h3>ResellerClub</h3>
         </div>
        <div class="slide">
          <h3>GoDaddy</h3>
          </div>
        <div class="slide">
          <h3>BlueHost</h3>
        </div>
      </div>
    </div>
2

My fiddle is : Edit fiddle - JSFiddle - Code Playground