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: