Home/ Questions/Q 9309475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T00:52:28+00:00

I’m using this great CSS code to slowly automatically change the background colour by

  • 0

I’m using this great CSS code to slowly automatically change the background colour by cycling through a transition of 4 colours.

I want to apply this to several individual Div’s and have them all begin on a different colours. The effect would work like a table with each cell changing colour without user interaction.
I can apply this effect to any single element in the page but I want to use it more than once and with a different start colour.

I tried just changing the starting colour of the Div but this doesn’t seem to work. Does any one know the solution?

@-webkit-keyframes pulse 
{
  0% {background-color: #45CEEF;}
 25% {background-color: #FFF5A5;}
 50% {background-color: #FFD4DA;}
 75% {background-color: #99D2E4;}
 100% {background-color: #D8CAB4;}
}
#div 
{
 background-color: #45CEEF;    
 -webkit-animation: pulse 40s infinite alternate;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work now. Use a negative time offset in each div that you create after the first. Vary the time in each to keep them different colours.

      <html>
<head>


<style> 

 @-webkit-keyframes pulse  
{
0% {background-color: #45CEEF;} 
25% {background-color: #FFF5A5;}
 50% {background-color: #FFD4DA;}
 75% {background-color: #99D2E4;}
100% {background-color: #D8CAB4;}
}



#cell1
{
width:100px;
height:100px;

-webkit-animation: pulse 35s infinite;

 }


   #cell2
   {
  width:100px;
 height:100px;

-webkit-animation: pulse 35s ease -3s infinite;


 }

#cell3
{
width:100px;
height:100px;

-webkit-animation: pulse 35s ease -5s infinite;


 }

</style>
 </head>
<body>

 <div id="cell1"></div>
 <br/>

 <div id="cell2"></div>
 <br/>


<div id="cell3"></div>

</body>
    • 0