在循环中更改 div 元素的背景颜色交叉淡入淡出

Posted 2023-02-21

【中文标题】在循环中更改 div 元素的背景颜色交叉淡入淡出

【英文标题】：Change Background-Color of div element Cross Fade in a Loop

【发布时间】：2013-07-28 10:16:46

【问题描述】：

我想通过 crossfade 将 div 元素的背景颜色从黑色变为红色再变为蓝色，但现在不知道该怎么做。我尝试用图像来做，但是将图像作为背景并通过淡化效果进行更改会使它变得沉重。有没有办法通过 CSS 或 javascript 来做到这一点？请帮忙。

【问题讨论】：

通过淡入淡出 jsfiddle.netTytSZ 将 div 元素的背景颜色从黑色变为红色再变为蓝色。我尝试用图像来做，但是将图像作为背景并通过淡入淡出效果进行更改使其变得沉重jsfiddle.net/562am

【参考方案1】：

CSS：

.fadechange 
    height:200px;
    width:100%;
    background: black;
    animation: fading 4s infinite;
   -webkit-animation: fading 4s infinite;


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

根据 w3schools，这必须在 IE(10+)、Opera、Chrome、Safari 和 Firefox 中工作。 http://www.w3schools.com/cs-s-ref/css3_pr_animation-keyframes.asp

jsfiddle

【讨论】：

感谢 Maria 提供这个有效的解决方案。它工作得很好。我对上面的代码几乎没有任何疑问。时间间隔如何管理？关键帧与旧浏览器的兼容性是什么，我读到它在 IE9 以下不兼容？

这意味着整个动画持续 4 秒。动画从 0% 开始，到 100% 结束，所以在 1.33s 后会变成红色，在 2.66s 时会变成蓝色，在 4s 后会再次变成黑色。这会无限重复。

谢谢，一段时间后我想通了。它工作得很好，但一段时间后，它会滞后并变慢。它不像这里 jsfiddle.net/NFyPX 那样同步。