Back
Tutorial on how to create a beautiful text animation using only CSS.
<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.