CSS关键帧实现指定时间戳元素不透明度与幻灯片同步切换

核心逻辑完全对齐现有轮播的40秒总时长、关键帧时间节点，无需JavaScript即可实现颜色块和图片、文本的切换节奏完全匹配。

第一步：补充颜色块基础样式 #

先给颜色块容器和色块本身加基础布局样式，让所有色块叠放在同一位置，默认保持低透明度：

.color-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.color {
  position: absolute;
  inset: 0;
  opacity: 0.2; /* 非激活状态透明度，可根据设计需求调整为0~1之间的数值 */
  animation-duration: 40s; /* 和轮播动画总时长完全一致 */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

第二步：给每个色块绑定对应动画 #

4个色块按HTML顺序分别对应4张轮播内容，单独绑定独立的动画名：

/* 第一个色块 对应第一张轮播内容 */
.bluerocratic-bg {
  animation-name: color_slide_1;
}
/* 第二个色块 对应第二张轮播内容 */
.blue-dacnis-bg {
  animation-name: color_slide_2;
}
/* 第三个色块 对应第三张轮播内容 */
.lamiaceae-bg {
  animation-name: color_slide_3;
}
/* 第四个色块 对应第四张轮播内容 */
.acid-pops-bg {
  animation-name: color_slide_4;
}

第三步：编写对齐轮播节奏的关键帧 #

所有关键帧时间点完全复用现有轮播动画的切换节点，保证淡入淡出和轮播滑动完全同步：

@keyframes color_slide_1 {
  0% { opacity: 1; }
  22.5% { opacity: 1; }
  28.5% { opacity: 0.2; }
  90% { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes color_slide_2 {
  0% { opacity: 0.2; }
  22.5% { opacity: 0.2; }
  28.5% { opacity: 1; }
  45% { opacity: 1; }
  51% { opacity: 0.2; }
  100% { opacity: 0.2; }
}

@keyframes color_slide_3 {
  0% { opacity: 0.2; }
  45% { opacity: 0.2; }
  51% { opacity: 1; }
  67.5% { opacity: 1; }
  76.5% { opacity: 0.2; }
  100% { opacity: 0.2; }
}

@keyframes color_slide_4 {
  0% { opacity: 0.2; }
  67.5% { opacity: 0.2; }
  76.5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0.2; }
}

兼容说明 #

如果需要兼容旧版Webkit内核浏览器，参照你原有轮播动画的写法，给每个@keyframes加@-webkit-keyframes前缀，同时给.color上的animation属性加-webkit-前缀即可。

内容的提问来源于stack exchange，提问作者Vogtei