我有两个 div 元素，每个元素都包含文本。我想将一个div 淡化成另一个div，这样当一个消失时，另一个出现并且循环重复。有谁知道这是怎么做到的吗？我什至不知道从哪里开始。
<div>
<div>Expand your knowledge</div>
<div>Blah Blah Blah</div>
</div>
这两个 div 元素应该在一个循环中从一个过渡到另一个。
【问题讨论】：
首先，我将向您的 HTML 元素添加类以用作样式挂钩，这将使使用它们更容易。在 CSS 中 use classes for the majority of styling 也是最佳实践。动画的包装类或“舞台”将获得类fader-stage。每个“幻灯片”（我将调用每个将淡出并进入另一个的 div 元素）都应用了相同的通用类 fader-slide，并且我还为每个单独的幻灯片应用了一个独特的类表示它在呈现顺序中的编号（fader-slide--1、fader-slide--2，如果要添加更多元素，则依此类推）。
<div class="fader-stage">
<div class="fader-slide fader-slide--1">Expand your knowledge</div>
<div class="fader-slide fader-slide--2">Blah Blah Blah</div>
</div>
现在是 CSS！ ??
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 2rem auto;
position: relative;
width: 50%;
}
这种风格中唯一必须保持“原样”的部分是position: relative。我们在包含元素上使用它，这样当我们在下一步中对子元素使用position: absolute时，它不会使它们根据文档的根元素定位自己，而是根据最接近的相对定位自己定位的祖先元素（这个）。此包装类中的其他所有内容都可以根据您的喜好或项目的特定规范进行更改。
现在我们使用@keyframes 创建一个简单的动画，它将opacity 级别从1 变为0。似乎我们可以保持简单，只需调用效果fade-out。我们将在下一步中将此标识符与animation 属性一起使用。如果您想了解有关此 CSS 规则的更多信息，可以read more about keyframes here。
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
现在我们需要设置您想要相互淡入的“幻灯片”元素的样式。我们将使用已应用于所有幻灯片的通用类fader-slide。
我在fader-slide 上设置了一些非常通用的样式。我想让每张幻灯片占据包装div 中的最大空间，并使每张幻灯片的所有内容居中。
我使用position: absolute 将每张幻灯片从文档的正常流程中取出，这将有效地让它们彼此叠放。然后我将top 和left 属性设置为0，以便将元素开始定位在舞台的左上角。如果我们没有在上一步中将fader-stage 元素上的position 属性设置为relative，那么这样做会将幻灯片定位在文档的左上角。
我使用flexbox 属性轻松确保幻灯片内的所有内容都水平和垂直居中。
最重要的是，我还应用了我们在上面的keyframes 步骤中制作的fade-out 动画。我告诉动画通过名为fade-out 的keyframes 动画，该动画的持续时间为2.5 秒，在制作动画时使用ease-out animation-timing-function，运行infinite 次数，并在动画结束时来回alternate。我使用 animation shorthand property 在一行 CSS 中完成所有这些。
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
对于每张单独的幻灯片，我会为后续的每张幻灯片应用增加 2.5s 的 animation-delay 属性。您显然可以将动画持续时间、延迟和计时功能更改为您想要的任何内容。如果您希望每张幻灯片在完全显示后立即开始淡出，那么最好动画持续时间和每个延迟增量彼此相等。对于您想要添加的任何其他幻灯片，您只需将您选择的延迟量添加到之前的延迟量，然后继续增加它。我就是这样做的。我将值为1 的z-index 属性添加到第一张幻灯片，以便在页面加载后动画开始时它位于其他幻灯片之上。否则，DOM 顺序中的最后一张幻灯片将在开始时位于顶部。为了使褪色效果更明显，我还将在随后的每张幻灯片上更改background-color。
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
这里是codepen so you can see it all working 一起。 ?
? 频闪警告：如果您患有癫痫症，或患有由脉冲光引起的癫痫发作或头痛，您可能希望避免查看此示例。我估计效果是温和的，但是当你点击上面的链接时它会自动播放，所以我相信向任何对这些事情敏感的人发出警告是公平的。
这是上面所有的 CSS 合二为一，易于复制/粘贴 sn-p：
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 20px auto;
position: relative;
width: 50%;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
如果我们继续前进，我们可以用它做更多很多，但我相信这达到了我理解的你的问题中列出的规范。
如果您没有使用 Autoprefixr 或 Prefixfree 之类的东西将供应商前缀应用于您的 CSS，那么您可能需要将 -webkit（可能还有 -moz 和 -ms）前缀添加到 @987654379 @ 属性，以及 animation-delay、@keyframes，可能还有 flexbox 属性（display: flex、align-items: center 和 justify-content: center），但前提是您想为向后浏览器兼容性撒网.如果您不知道如何执行此操作或我在说什么，请告诉我，我将进行编辑以包含浏览器前缀。
Autoprefixer 也有一个 online tool for adding vendor prefixes，如果您不想将其设置为 PostCSS 作为项目的包依赖项。要使用在线工具，您只需给应用程序一个 string describing the browsers you want to target，粘贴您的 CSS，它会返回您的 CSS 以及必要的供应商前缀，以（主要）确保符合您添加的目标浏览器。
如果您对此方法有任何其他问题，请告诉我，我很乐意为您提供帮助。 ????
【讨论】：
@keyframes 规则指定动画代码。
动画是通过从一组 CSS 样式逐渐更改为另一组来创建的。
在动画期间，您可以多次更改 CSS 样式集。
以百分比或使用关键字“from”和“to”指定样式更改的时间，这与 0% 和 100% 相同。 0%是动画的开始，100%是动画的结束。
@keyframes animate {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@keyframes animation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.div1{
animation: animation 1s infinite;
}
.div2 {
animation: animate 1s infinite;
} <div class="div1">Expand your knowledge</div>
<div class="div2">Blah Blah Blah</div>【讨论】：