CSS Slide Text Animation/ Sliding Text Effect

---

Demo:

To create the CSS Slide Text Animation follow the steps below and watch the video tutorial:

1. Add HTML
2. Add CSS

Step1.

Add HTML

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

Step2.

Add CSS

Set the colour and the position of the background and elements:

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;
}

Style the text:

.text, .slideDown, .slideUp {
  position: relative;
  font-family: tahoma;
  font-size: 35px;
  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;
}

Add CSS Animation:

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

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

To display the animation on smaller screens (tablets, mobile):

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

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Pure CSS Rainbow Text Animation

CSS Perspective Text Effect

CSS Mirror/ Reflection Text Effect