DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

uidesign09
uidesign09

Posted on

CSS Voice Animation

In this tutorial, we'll make a simple CSS Voice animation.

Live Link : https://drmaniya.github.io/SoundAnimation-pro/
Source Code Link : https://github.com/drmaniya/SoundAnimation-pro

Image description
HTML Code

<div class="container">
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
        <div class="animation"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode

Css with animation

.container {
        height: 100vh;
        display: flex;
        background: #000;
        justify-content: center;
        align-items: center;
    }

    .animation {
        width: 5px;
        border-radius: 18px;
        height: 80px;
        background: RED;
        margin: 10px;
        animation: WaveAnimation 1s linear infinite;
    }

    .animation:nth-child(2) {
        animation-delay: 0.1s;
    }

    .animation:nth-child(3) {
        animation-delay: 0.1.5s;
    }

    .animation:nth-child(4) {
        animation-delay: 0.2s;
    }

    .animation:nth-child(5) {
        animation-delay: 0.2.5s;
    }

    .animation:nth-child(6) {
        animation-delay: 0.3s;
    }

    .animation:nth-child(7) {
        animation-delay: 0.3.5s;
    }

    .animation:nth-child(8) {
        animation-delay: 0.4s;
    }

    @keyframes WaveAnimation {
        0% {
            transform: scale(0);
        }

        50% {
            transform: scale(1);
        }

        100% {
            transform: scale(0);
        }
    }
Enter fullscreen mode Exit fullscreen mode

That's it, Hope you like it :)

Top comments (0)

🌚 Life is too short to browse without dark mode