webkit-keyframes 脉冲背景颜色变化答案

【问题标题】：webkit-keyframes pulse background color changewebkit-keyframes 脉冲背景颜色变化
【发布时间】：2014-06-26 02:44:39
【问题描述】：

我正在使用这个出色的 CSS 代码通过循环 4 种颜色的过渡来缓慢地自动更改背景颜色。

我想将此应用于几个单独的 Div，并让它们都以不同的颜色开始。效果就像一个表格，每个单元格都在改变颜色，无需用户交互。我可以将此效果应用于页面中的任何单个元素，但我想多次使用它并使用不同的起始颜色。

我尝试只更改 Div 的起始颜色，但这似乎不起作用。有谁知道解决办法吗？

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

【问题讨论】：

标签： colors background webkit css-animations

【解决方案1】：

现在应该可以了。在第一个之后创建的每个 div 中使用负时间偏移。改变每个的时间以保持它们不同的颜色。

  <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>

【讨论】：

这很好，但它们仍然会以相同的颜色开始，有点，但也有点无法修复它。（我也认为脉冲的第二个包含只是重复）
是的，这很可爱。相同的脉冲速度，但这里的“轻松”在做什么？