Back

Text animation

Tutorial on how to create a beautiful text animation using only CSS.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<div class="container">
  <span>L</span>
  <span>O</span>
  <span>V</span>
  <span>E</span>
</div>

<style>
.container {
  position: relative;
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, .2));
  font-size: 60px;
}
.container span {
  font-family: cursive;
  display: inline-block;
  text-shadow: 0 0 8px #EA00FF;
  color: #fff;
  animation: jump 1s infinite;
}
span:nth-child(2) {
  animation-delay: .15s;
}
span:nth-child(3) {
  animation-delay: .3s;
}
span:nth-child(4) {
  animation-delay: .45s;
}
@keyframes jump {
  0%, 40%, 100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-20px)
  }
}

</style>
      
Thank you for reading this article.

More text-animations

Similar

See also