Smooth text bounce animation like a sea wave using css & JavaScript

<html lang="en">
<head>
<title>Sea Wave Text Animation using CSS & JavaScript</title>
<style>
    .wave-text {
        font-size: 36px;
        font-weight: bold;
        display: inline-block;
    }

.wave-text span {
        display: inline-block;
    }

.wave {
        animation: wave 2s infinite;
    }

@keyframes wave {
        0%, 100% {
            transform: translateY(0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translateY(-5px);
        }
        20%, 40%, 60%, 80% {
            transform: translateY(5px);
        }
    }

.g {
        color: #4285f4; /* Google Blue */
    }

.o1 {
        color: #ea4335; /* Google Red */
    }

.o2 {
        color: #fbbc05; /* Google Yellow */
    }

.g2 {
        color: #4285f4; /* Google Blue */
    }

.l {
        color: #34a853; /* Google Green */
    }

.e {
        color: #ea4335; /* Google Red */
    }
</style>
</head>
<body>
<div class="wave-text">
    <span class="g">G</span>
    <span class="o1">o</span>
    <span class="o2">o</span>
    <span class="g2">g</span>
    <span class="l">l</span>
    <span class="e">e</span>
</div>

letters.forEach((letter, index) => {
        letter.classList.add('wave');
        letter.style.animationDelay = `${index * 0.1}s`;
    });
</script>
</body>
</html>

3 Comments

HEBIK 14 May, 2024
2024-05-14T10:54:59+05:30
It's great to see how creative you can get with coding. I'm inspired to try something similar now. Thanks for sharing this code snippet with us!

Anonymous 14 May, 2024
2024-05-14T10:54:59+05:30
Rotate 360 degree

<style>
.wave-text span:hover{
transform:rotate(360deg);
}
</style>

Anonymous 02 June, 2024
2024-05-14T10:54:59+05:30
Keep on sharing good codes

Smooth text bounce animation like a sea wave using css & JavaScript

You may like these posts :

3 Comments