
Demo:
To create the CSS Slide Text Animation follow the steps below and watch the video tutorial:
- Add HTML
- 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 Mirror/ Reflection Text Effect