Text Ripple Animation
Home
Snippets
Text Ripple Animation
HTML
CSS
JS
<h1> <span>R</span> <span>I</span> <span>P</span> <span>P</span> <span>L</span> <span>E</span> </h1>
body { height: 100vh; margin: 0; background: #111; color: white; display: flex; justify-content: center; align-items: center; font-family: sans-serif; } h1 { display: flex; gap: 5px; font-size: 3rem; } h1 span { display: inline-block; animation: ripple 1.2s ease-in-out infinite; } h1 span:nth-child(1) { animation-delay: 0s; } h1 span:nth-child(2) { animation-delay: 0.1s; } h1 span:nth-child(3) { animation-delay: 0.2s; } h1 span:nth-child(4) { animation-delay: 0.3s; } h1 span:nth-child(5) { animation-delay: 0.4s; } h1 span:nth-child(6) { animation-delay: 0.5s; } @keyframes ripple { 0%, 100% { transform: translateY(0) scale(1); color: white; } 50% { transform: translateY(-15px) scale(1.2); color: #00f7ff; } }
//js
Ad #1
Ad #2
Scroll to Top