CSS 背景图滑动切换：实现无闪烁、高性能的左右滑入动画-html教程-PHP中文网

本文详解如何用纯 css 实现背景图片的“滑入式”轮播（而非默认淡入淡出），通过 transform: translatex() 配合 animation 精确控制每张图的位移与时机，避免重排、保持 gpu 加速，并确保首帧无动画。

本文详解如何用纯 css 实现背景图片的“滑入式”轮播（而非默认淡入淡出），通过 transform: translatex() 配合 animation 精确控制每张图的位移与时机，避免重排、保持 gpu 加速，并确保首帧无动画。

要将传统背景图淡入淡出（fade）效果升级为平滑的从右向左滑入（slide-in-from-right）轮播，关键在于放弃依赖 opacity 的渐变过渡，转而使用硬件加速的 transform: translateX() 控制元素位置，并通过 CSS 动画时序精确调度每张背景图的入场/退场阶段。

以下是一个纯 CSS、无需 JavaScript 的高性能实现方案（兼容现代浏览器，含首帧无动画保障）：

✅ 核心思路

每张背景图由
内的承载，初始全部置于视口右侧（translateX(100%)）；
当前激活项 translateX(0)，上一张退至左侧（translateX(-100%)），下一张从右侧滑入；
利用 animation-delay 错开各图动画起始时间，形成循环流水线；
首张图（:nth-child(1)）设置 animation-delay: -6s，使其在动画周期开始时已处于 translateX(0) 状态，实现“零延迟启动”。

? 完整 CSS 代码（替换原样式）

/* 基础布局：全屏固定定位 */
.slideshow,
.slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.slideshow:after { content: ''; }

/* 背景容器：绝对定位 + 层叠控制 */
.slideshow li span {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  /* 关键：启用 GPU 加速 */
  will-change: transform;
  /* 初始状态：全部在右侧外 */
  transform: translateX(100%);
  /* 禁用 opacity 动画，改用 transform */
}

/* 动画定义：6秒一帧，共3图 → 总周期18s */
@keyframes slideAnimation {
  0%   { transform: translateX(100%); }  /* 准备入场 */
  10%  { transform: translateX(0); }     /* 完全入场（持续） */
  25%  { transform: translateX(0); }     /* 保持显示 */
  40%  { transform: translateX(-100%); } /* 滑出至左侧 */
  100% { transform: translateX(-100%); }
}

/* 分配每张图的动画时机（总周期18s）*/
.slideshow li:nth-child(1) span {
  background-image: url("https://picsum.photos/1920/1080?random=1");
  animation: slideAnimation 18s infinite;
  animation-delay: -6s; /* 首帧立即生效，无初始滑动 */
}
.slideshow li:nth-child(2) span {
  background-image: url("https://picsum.photos/1920/1080?random=2");
  animation: slideAnimation 18s infinite;
  animation-delay: 0s;  /* 第2图在 t=0s 开始滑入 */
}
.slideshow li:nth-child(3) span {
  background-image: url("https://picsum.photos/1920/1080?random=3");
  animation: slideAnimation 18s infinite;
  animation-delay: 6s;  /* 第3图在 t=6s 开始滑入 */
}

✅ HTML 结构（保持不变，仅需确保为空标签承载背景）

Dummy text 1
Dummy text 2
Dummy text 3

⚠️ 注意事项与优化建议

性能优先：始终使用 transform + will-change 替代 left/top/opacity，触发 GPU 合成层，避免布局抖动；
图片路径校验：原问题中第三张图 URL 存在拼写错误（placekititen.com → 应为 placekitten.com），请务必修正；
响应式适配：若需支持移动端缩放，可添加 background-attachment: fixed（慎用，可能影响性能）或配合 @media 调整 background-size；
无障碍增强：为添加 aria-hidden="true"，避免屏幕阅读器误读空元素；
降级处理：旧版浏览器不支持 @keyframes 时，建议通过 @supports (animation-name: test) 提供 opacity 回退方案。