Heart Beat Animation

Following is simple web development program

that will animate a image by CSS using Transform scale property of CSS.

There will be background music in result ; As you press START button the heart

image will animate as well background music will be played. See this

awesome program you will like it.😀

Program Source code :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Heart Beat Animation Project</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    main{
        width: 90%;
        display: grid;
        margin: 4rem auto;
        grid-template-rows:40vw;
        grid-template-columns: 70% 30%;
    }
    .content{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content img{
        width: 50%;
        height: 60%;
    }

    button{
        width: 70%;
        height: 5rem;
        margin: 5rem auto;
        outline: none;
        border: .2rem solid #001;
        border-radius: 3rem;
        background:cyan;
        color: red;
        font-weight:800;
        font-family:Georgia;
        font-size: 2rem;
        cursor: pointer;
    }

    button:hover{
        background-color: red;
        color: cyan;
    }

    audio{
        display: none;
    }

    .animate{
        filter: drop-shadow(-15px -15px 18px #000);
        animation: beat 1s linear infinite;
    }

    @keyframes beat{
        0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.4);
    }
    60% {
        transform: scale(1.2);
    }
    80% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
 }
    </style>
</head>
<body>
    <main>
        <div class="content">
            <img src="heart.png" alt="Heart Image">
        </div>
        <div class="btns">
            <button type="submit" id="btn1">START</button>
            <button type="submit" id="btn2">STOP</button>
            <audio src="heartbeat.mp3" controls loop></audio>
        </div>
    </main>
</body>
<script>

    b1 = document.getElementById('btn1');

    b2 = document.getElementById('btn2');

    i = document.querySelector('img');

    a = document.querySelector('audio');

    const st = () =>{
        a.play();
        i.classList.add('animate');
    };

    const sp = () =>{
        a.pause();
        i.classList.remove('animate');
    };


    b1.addEventListener("click",st);

    b2.addEventListener("click",sp);

</script>
</html>

OUTPUT : -

( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )