如何加速轮播滑块？请求将幻灯片过渡动画时长减半并缩短切换延迟

要实现轮播动画时长减半、缩短幻灯片延迟的需求，只需调整CSS中的动画参数并适配关键帧即可，修改后的完整代码如下：

修改后的CSS代码 #

.container_slider_css {
  margin: 50px auto;
  width: 1427px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.photo_slider_css {
  position: absolute;
  /* 动画总时长从9s减半为4.5s */
  animation: round 4.5s infinite;
  opacity: 0;
  width: 100%;
}

@keyframes round {
  /* 按比例调整关键帧百分比，保持淡入淡出流畅性 */
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}

img:nth-child(1) {
  /* 延迟从6s减半为3s */
  animation-delay: 3s;
}

img:nth-child(2) {
  /* 延迟从3s减半为1.5s */
  animation-delay: 1.5s;
}

img:nth-child(3) {
  animation-delay: 0s;
}

修改说明 #

• 动画总时长减半：将.photo_slider_css中的动画时长从9s改为4.5s，直接让整体轮播速度翻倍。
• 缩短切换延迟：把每张图片的animation-delay按原比例减半，保证轮播切换节奏同步加速。
• 适配关键帧区间：原关键帧的25%和40%对应9s周期内的淡入淡出阶段，减半后调整为12.5%和20%，确保淡入淡出时长同步缩短，避免动画衔接生硬。

HTML代码无需修改，直接沿用原代码即可。

内容的提问来源于stack exchange，提问作者Капуста