Javascript 背景颜色改变时需要动画

我创建了一个网页，有三种不同颜色的div的变色背景。我有以下代码。它的作品，但当背景改变，我需要简单的动画，当他们改变颜色。我不关于动画，请帮助

（功能（）{
var十六进制代码=[
"ff3333",，
"33cc66",，
"3399cc",，
],
el=document.getElementById（'autocolor'）.style，
计数器=-1，
hexalen=hexacode.length；
函数auto（）{
el.backgroundColor=hexacode[计数器=++计数器%hexalen]；
}
设置间隔（自动，2000年）；
})();

#自动着色{
宽度：1000px；
高度：700px；
填充：0.75em0.5em0；
背景：#3399cc；
边框：1px纯黑；
保证金：3em自动0；
字体：粗体90%无衬线；
}

---

彩色动画可能很棘手。如果您同意使用jquery，可以签出此链接（单击“查看源代码”）

---

该示例为控件的颜色和宽度设置动画。

我正在粘贴一个仅使用HTML5和CSS3的代码片段。

div{
宽度：100px；
高度：100px；
背景:#ff3333；
-webkit动画：myfirst 5s；/*Chrome、Safari、Opera*/
动画迭代次数：无限；
-webkit动画迭代计数：3；/*Chrome、Safari、Opera*/
动画：我的第一个5s；
-webkit动画方向：反向；/*铬、Safari、Opera*/
动画方向：反向；
}
/*铬、狩猎、歌剧*/
@-webkit为myfirst设置关键帧{
来自{背景：#ff3333；}
致{背景：#ff5533；}
}
/*标准语法*/
@关键帧myfirst{
来自{背景：#ff3333；}
致{背景：#ff5533；}
}
注意：此示例在Internet Explorer 9和早期版本中不起作用

关键帧也支持百分比。您可以尝试下面的代码，并根据需要进行调整

div{
宽度：100px；
高度：100px；
背景:#ff3333；
-webkit动画：myfirst 5s；/*Chrome、Safari、Opera*/
动画迭代次数：无限；
-webkit动画迭代计数：3；/*Chrome、Safari、Opera*/
动画：我的前10秒；
-webkit动画方向：反向；/*铬、Safari、Opera*/
动画方向：反向；
}
/*铬、狩猎、歌剧*/
@-webkit为myfirst设置关键帧{
0%{背景：#3399cc；}
50%{背景：#33cc66；}
100%{背景：#ff3333；}
}
/*标准语法*/
@关键帧myfirst{
0%{背景：#3399cc；}
50%{背景：#33cc66；}
100%{背景：#ff3333；}
}

注意：此示例在Internet Explorer 9和早期版本中不起作用

此代码可能会有所帮助。根据需要添加或编辑颜色代码和动画

变量颜色=['#ff3333'、'#33cc66'、'#3399cc']；//颜色列表
var-tempID=0；
var changeInterval=2000；//更改间隔（毫秒）
var objectID='#bgDiv'；//反对改变颜色。
$（文档）.ready（函数（）{
setInterval（函数（）{
动画（{backgroundColor:colors[tempID]}，500）；
tempID=tempID+1；
如果（tempID>colors.length-1）tempID=0；
}，改变间隔）；
});
#bgDiv{
宽度：100px；
高度：100px；
背景：#3399cc；
}

I开发者，所以我不知道更多的设计，比如动画。所以你不知道你可以使用什么技术？双色效果很好，但我需要换三色#3399cc、#33cc66、#ff3333对于一组特定颜色，必须使用JQuery。