Categories
CSS HTML JQuery Web development

CSS Text Drop Animation

CSS Text Drop Animation

To learn how to create the CSS Text Drop Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="text-drop">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l2">l</div>
  <div class="o">o</div>
  <div class="smile">:)</div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #001219;
}

Style and animate the text:

#text-drop {
  position: relative;
  display: flex;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
}

.h {
  opacity:0;
  animation: drop .4s linear forwards;
  color: #9b5de5;
}

.e {
  opacity:0;
  animation: drop .4s linear forwards .2s;
  color: #f15bb5;
}

.l {
  opacity:0;
  animation: drop .4s linear forwards .4s;
  color: #fee440;
}

.l2 {
  opacity:0;
  animation: drop .4s linear forwards .6s;
  color: #00bbf9;
}

.o {
  opacity:0;
  animation: drop .4s linear forwards .8s;
  color: #00f5d4;
}

@keyframes drop {
  0% {transform: translateY(-200px) scaleY(0.9); opacity: 0;}
  5% {opacity: .7;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-17px) scaleY(.9); opacity: 1;}
  75% {transform: translateY(-22px) scaleY(.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

.smile {
  opacity:0;
  animation: drop .4s linear forwards 1.2s;
  color: #9b5de5;
  font-size:90px;
  margin-left:15px;
}

Step3. (optional)

Add jQuery

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#text-drop').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Slide Effect

CSS Bouncing Text Animation

CSS Mirror/ Reflection Text Effect