使循环的div背景褪色成不同的颜色。

Question

我试图使一个div的背景颜色连续变化4或5次，但实际上不知道从哪里开始。我需要的时间是相当精确的，因为我还必须同时淡出图像的背景颜色顶部。

做这件事最好的方法是什么？jQuery还是css？

谢谢

编辑I已经能够使用CSS动画和关键帧改变背景属性的颜色，如下所示：

<div class="fading"></div>

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

但是，我不确定这是否会保持与jquery相同的时间，而jquery将用来淡入和淡出图像吗？

我还担心在旧浏览器上会发生什么，我应该考虑使用哪些故障保险柜呢？

Answer 1

时间应该保持不变。在这里，我已经包含了没有jQuery的衰落图像。考虑到代码，我不认为您真的需要帮助，但是要回答这个问题，因为它也适用于较旧的浏览器，jQuery可能是一个更好的选择。

演示http://jsfiddle.net/dP8fL/1/ (时间改为10 s，以减少等待检查的时间)

<div class="fading">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl7V8rHy90EMd_IYWwbiucARcCPDHnwBkoB7T3ZJjDdqauT-j3eQ" />
</div>

CSS

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
.fading img{
    width:100px;
    animation: opacityfading 30s infinite;
    -webkit-animation: opacityfading 30s infinite;
    margin:30px;
}
@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}
@keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}