1. Tutorials
  2. CSS
  3. Dropping Text Animation

Dropping Text Animation

In this tutorial, you will learn how to create a dropping text animation with CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="container">
    <span>W</span>
    <span>i</span>
    <span>n</span>
    <span>t</span>
    <span>e</span>
    <span>r</span>
    <span>w</span>
    <span>i</span>
    <span>n</span>
    <span>d</span>
  </div>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  position: relative;
  display: flex;
}

.container span {
  font-size: 6em;
  color: white;
  font-weight: bold;
  opacity: 0;
  animation: drop 0.4s linear forwards;
}

.container span:nth-child(2) {
  animation-delay: 0.2s;
}

.container span:nth-child(3) {
  animation-delay: 0.4s;
}

.container span:nth-child(4) {
  animation-delay: 0.6s;
}

.container span:nth-child(5) {
  animation-delay: 0.8s;
}

.container span:nth-child(6) {
  animation-delay: 1s;
}

.container span:nth-child(7) {
  animation-delay: 1.2s;
}

.container span:nth-child(8) {
  animation-delay: 1.4s;
}

.container span:nth-child(9) {
  animation-delay: 1.6s;
}

.container span:nth-child(10) {
  animation-delay: 1.8s;
}

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