<div class="slide-effect">
  <div class="text">CSS Slide Effect:</div>
  <div class="slideDown">Slide Down,</div>
  <div class="slideUp">Slide Up</div>
</div>

body {
  height: 100vh;
  align-items: center;
  display: flex;
}

.slide-effect {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text, .slideDown, .slideUp {
  position: relative;
  font-family: tahoma;
  font-size: 25px;
  opacity:0;
}

.text {
  top:40px;
  font-weight: bold;
  animation: slideUp ease .4s forwards;
}

.slideDown {
  top:-40px;
  left:5px;
  animation: slideDown ease .4s forwards .6s;
}

.slideUp {
  top:40px;
  left:10px;
  animation: slideUp ease .5s forwards 1.2s;
}


@keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
}

@keyframes slideDown {
  0% {transform: translateY(0);}
  100% {transform: translateY(40px);opacity:1;}
}

@media only screen and (max-width: 600px) {
  .slide-effect, .text, .slideDown, .slideUp {
    font-size: 15px;
  }
}

// Click on the text to repeat the animation.

$(document).ready(function(){
  $('.slide-effect').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});