Automatic changing background color loop (jQuery/css?)

Question

I've seen this feature in a couple of Wordpress themes where the background of for example the footer slowly changes its color, and I have always wondered if there is a simple trick to do this. (This is probably done with jquery? Or can it be done with pure css?)

Basically, the background color gradually transitions from one color to another (for example pink to blue, blue to red, red to pink) and stays in an infinite loop. It doesn't require any action such as hover or click, it just does its thing. :)

Is there an easy way to do this? If so, would love to see the best way to do this with an example code.

Thank you so much in advance.

Solution

You don't need in jQuery for making this trick. You can use simple css animation instead, and it will be more perfomence and simply.

It's my example

Our layout's

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

Css style

 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 change colors of our block.

You're welcome :) Can you ask me something, if you want.

Comments

[TimVanGorp]

Thank you so much for your answer Punit. Have a great day ahead! :)

[TimVanGorp]

I had no idea css had that option, thank you for the advice @Borisov Have a great day!

[Sandeep]

agree with @timvangorp though! Can be done with keyframes :)

[Borisov Semen]

Sorry, I added some example for it.

[TimVanGorp]

Thanks Borisov, you're the best!