Javascript 如何使线性渐变背景图像和文本同时无限淡入淡出

我有一个标题，有一个线性渐变颜色的背景，在下角有一张图片。它还有两个文本部分（h1和p）

我想在3秒钟的时间间隔内无限切换以下内容：

（a） 线性背景颜色和图像，当前背景的淡入淡出动画和传入背景的淡入淡出动画以3秒的间隔无限长地同时出现

（b） 当前文本部分h1（文本A）和p（子文本A）也应在新文本内容h1（文本b）和p（子文本b）淡入的同时淡出。这也应以3秒的间隔无限持续

const header=document.querySelector（“.header”）；
const nav=document.querySelector（“.nav”）；
window.onload=函数（）{
setInterval（函数（）{
header.classList.toggle（'changed-header'）；
nav.classList.toggle（'changed-nav'）；
}, 3000);
}

*，
*：：之前，
*：：之后{
保证金：0；
填充：0；
}
html{
字体大小：62.5%；
框大小：边框框；
}
身体{
框大小：继承；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
字体系列：无衬线；
字号：18px；
线高：25px；
颜色：#000；
}
.集装箱{
最大宽度：1400px；
保证金：0自动；
}
.标题{
背景：url(https://res.cloudinary.com/iolamide/image/upload/v1599732332/cute-dog_kqcegn.png)线性梯度（90度，rgba（131,58,180,1）0%，rgba（253,29,29,1）50%，rgba（252176,69,1）100%）；
高度：766px；
背景重复：无重复；
背景位置：右下角；
边界半径：0.03.2rem 3.2rem；
过渡：全部3秒；
}
.header.changed-header{
背景：url(https://res.cloudinary.com/iolamide/image/upload/v1599732328/cute-animal_w3aczq.png)线性梯度（90度，rgba（252176,69,1）0%，rgba（253,29,29,1）50%，rgba（0,0,0,1）100%）；
背景重复：无重复；
背景位置：右下角；
}
.标志a{
颜色：#fff；
字体大小：30px；
文字装饰：无；
}
.导航{
背景：线性梯度（180度，#12213C-18.75%，rgba（0，102161，0）100%）；
高度：144px；
显示器：flex；
证明内容：之间的空间；
填充：3.8rem 6rem 0 6rem；
过渡：全部3秒；
}
.nav.changed-nav{
背景：线性梯度（180度，#345456 10.75%，rgba（0，102161，0）100%）；
}
.标志{
宽度：128px；
}
.菜单a{
文字装饰：无；
光标：指针；
颜色：#fff；
字体大小：粗体；
字体大小：16px；
线高：22px；
字母间距：0.03em；
}
.菜单a：非（：类型的第一个）{
左：4rem；
}
.顶{
位置：相对位置；
最高保证金：7.4雷姆；
左：6rem；
宽度：335px；
}
.顶部h1{
字体大小：40px；
线高：55px；
字号：800；
颜色：#fff；
边缘底部：24px；
}
.top p{
颜色：#fff；
字体大小：20px；
线高：27px；
边缘底部：80px；
}

以3秒的间隔无限衰减背景和文本
文本A

分文本A

如果你想无限期地淡入淡出任何东西，你可以使用CSS

@关键帧

在这种情况下，以下声明：

  animation: fadeInAndOut 6s linear infinite;

指示您将有一个CSS动画，该动画：


具有名称
fadeInAndOut
需要
6s
才能完成
具有
线性
定时功能
具有
无限的
动画迭代计数


然后动画本身：

@keyframes fadeInAndOut { 50% {opacity: 0;} }


[
0%
]开始于
opacity:1
（这是默认值，因此无需明确说明）
[
50%
]中游
opacity:0
[
100%
]在
opacity:1完成（这是默认值，因此无需明确说明）


工作示例：


p{
颜色：rgb（255,0,0）；
字体大小：32px；
文本对齐：居中；
动画：fadeInAndOut 6s线性无限；
}
@关键帧淡入淡出{
50%{不透明度：0；}
}
我将无限期淡入淡出
我理解这一点，但如何在淡入其他文本内容元素的同时淡出当前文本内容。也就是说，当一个文本淡入时，另一个文本内容淡出。当前背景淡出，而第二个背景淡入。此解决方案只会持续淡入淡出单个元素您将需要第二个补充动画，其中
0%
和
100%
点为
opacity:0和
50%
点为
不透明度：1.Hi Idris-以下答案是否解决了您的问题？如果是，请选择它作为正确答案。如果答案也是有用的，你也可以投赞成票。这样做将结束问题并奖励答案。谢谢