webkit-keyframes pulse background color change

background, colors, css-animations, webkit

Solution

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>

Problem

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; } ```

Original source