How to change background color with infinity loop?

ARyan MAurya
October 27, 2020
No Comments

You don’t need jQuery for making this trick. You can use simple CSS animation instead, and it will be more performance and simplicity.

In my example, we just add a div with a block class name.

<div class="block"></div>

After that, we add the CSS property

html, body {
     width: 100%;
     height: 100%;
} 

@keyframes color-animation {
    0% {
       background: #ad1457;
    }
    50% {
       background: #6a1b9a;
    } 
    100% {
       background: #bbdefb
    } 
}

.block {
   width: 100%;
   height: 100%;
   animation: color-animation 3s infinite linear alternate;
}

In this code, we created simple css animation, which changes the colors of our block.

Post your comment

Your email address will not be published. Required fields are marked *