1. 从一张图到一组图的思路演进做前端时间长了总会碰到一些看起来简单、做起来细节一堆的需求。图像幻灯片自动播放切换就是典型的一个。很多人第一反应是找个轮播插件Swiper、Slick 一挂配置几行就完事了。但真到了项目里尤其是对包体积敏感、或者设计稿有特殊动效要求的时候插件反而成了累赘。我自己的习惯是能用原生 CSS 搞定的动效尽量不引入 JS 库一来性能可控二来调试链路短出了问题一眼就能定位。这个项目的核心目标很明确用纯 CSS 动画实现一组图像的自动轮播图片之间平滑切换循环播放不需要用户手动点击。听起来像是 CSSkeyframes配合animation-delay就能搞定的事但实际做下来有几个关键决策点需要提前想清楚。第一个决策是切换方式。常见的幻灯片切换效果无非几种淡入淡出、水平滑动、垂直滑动、缩放切换、翻转切换。淡入淡出实现最简单视觉上也最稳妥不容易出现布局抖动水平滑动更接近传统轮播的体验但对容器的overflow和定位要求更高。我最终选了淡入淡出作为基础方案因为它在纯 CSS 场景下最不容易出问题而且后续想扩展成滑动或缩放只需要改transform和opacity的组合就行。第二个决策是动画驱动方式。纯 CSS 实现自动轮播核心思路是给每张图片设置相同的动画时长但不同的animation-delay让它们错开出现和消失的时间点。这里有个容易踩的坑如果直接用opacity从 0 到 1 再到 0中间没有保持阶段图片会一直处于渐变状态看起来像在闪烁。正确的做法是在关键帧里设置“保持可见”的区间比如 0% 到 20% 淡入20% 到 40% 保持40% 到 60% 淡出剩下的时间保持透明。第三个决策是图片数量与动画周期的关系。假设有 4 张图每张图展示 3 秒那么一个完整周期就是 12 秒。每张图的动画时长都是 12 秒但animation-delay分别是 0s、3s、6s、9s。这里要注意animation-delay为正值时动画会延迟开始但在延迟期间元素会保持初始状态。如果初始状态是opacity: 0那第一张图在页面加载后的前 3 秒是看不见的这显然不对。解决办法有两种一是给第一张图设置animation-delay: 0s并且初始opacity: 1二是用负的animation-delay让动画从中间某个时间点开始。我更推荐第二种因为负延迟可以让所有图片的动画状态在页面加载时就已经“进行中”避免了首屏空白的问题。提示负的animation-delay是纯 CSS 轮播的关键技巧。它让动画在页面加载时就已经处于运行状态而不是从零开始等待。这套思路确定之后剩下的就是具体的代码实现和细节打磨了。下面我会把整个实现过程拆开从 HTML 结构到 CSS 关键帧再到实际调试中遇到的问题一步步说清楚。2. 核心细节解析与实操要点2.1 HTML 结构越简单越稳纯 CSS 轮播的 HTML 结构不需要太复杂一个容器包住所有图片就行。我见过有人用ul li的结构也见过直接用div堆叠的。两种都可以但ul li在语义上更符合“列表”的含义而且后续如果想加指示点结构扩展更方便。div classslider ul classslider-list li classslider-itemimg srcimg1.jpg alt/li li classslider-itemimg srcimg2.jpg alt/li li classslider-itemimg srcimg3.jpg alt/li li classslider-itemimg srcimg4.jpg alt/li /ul /div这里有几个细节需要注意。第一img的alt属性不要留空虽然轮播图通常是装饰性的但写上描述对无障碍访问更友好。第二图片的尺寸最好保持一致如果原图比例不同用object-fit: cover来统一裁剪避免拉伸变形。第三容器.slider需要设置固定的宽高或者宽高比否则图片绝对定位后会脱离文档流容器高度塌陷。2.2 CSS 定位绝对定位是基础所有幻灯片项都需要绝对定位叠在同一位置。父容器.slider设置position: relative子项.slider-item设置position: absolute并且top: 0; left: 0; width: 100%; height: 100%。.slider { position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 auto; } .slider-list { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; } .slider-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: fadeSlider 12s infinite; } .slider-item img { width: 100%; height: 100%; object-fit: cover; display: block; }aspect-ratio这个属性现在兼容性已经很好了用它来控制容器比例比传统的padding-top百分比方案更直观。如果项目需要兼容老浏览器可以用padding-top: 56.25%来替代。2.3 关键帧设计淡入、保持、淡出、等待关键帧的设计直接决定了切换效果是否自然。我一开始写的版本是这样的keyframes fadeSlider { 0% { opacity: 0; } 10% { opacity: 1; } 25% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }这个版本的问题在于淡入和淡出的时间太短只有 10% 的周期4 张图 12 秒的周期下淡入只有 1.2 秒实际看起来有点仓促。后来我把淡入淡出的区间拉长到 15%保持区间设为 10%剩下的 60% 都是透明等待。调整后的关键帧keyframes fadeSlider { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }这样每张图的可见时间大约是周期的 25%也就是 3 秒淡入淡出各占 1.8 秒过渡比较柔和。具体数值可以根据图片数量和展示时长来调整核心原则是淡入淡出时间之和不要超过保持时间的两倍否则图片会一直在渐变没有稳定的展示窗口。2.4 延迟分配负延迟的妙用四张图的animation-delay分别是-9s、-6s、-3s、0s。为什么是负的因为负延迟让动画从周期的中间开始播放。以第一张图为例animation-delay: -9s意味着动画从 12 秒周期的第 9 秒开始播放对应关键帧的 75% 位置此时opacity是 0然后继续播放到 100% 再循环到 0%在 0% 到 15% 之间淡入。这样页面加载时第一张图会立刻开始淡入而不是等待 9 秒。.slider-item:nth-child(1) { animation-delay: -9s; } .slider-item:nth-child(2) { animation-delay: -6s; } .slider-item:nth-child(3) { animation-delay: -3s; } .slider-item:nth-child(4) { animation-delay: 0s; }这里有个容易搞混的地方负延迟的绝对值越大动画越“提前”开始。四张图的延迟间隔应该等于每张图的展示时长也就是周期除以图片数量。12 秒除以 4 等于 3 秒所以延迟间隔是 3 秒。注意如果图片数量不是 4 张延迟间隔和周期都要重新计算。公式是周期 图片数量 × 每张展示时长延迟间隔 周期 / 图片数量 每张展示时长。2.5 动画播放状态与性能考量animation的infinite让动画无限循环这是自动播放的关键。但无限循环的动画会持续占用合成线程的资源虽然opacity和transform属于合成属性性能开销不大但如果页面上同时有多个轮播还是要注意。一个优化技巧是给.slider-item加上will-change: opacity提前告诉浏览器这个属性会变化让浏览器做好合成准备。但will-change不要滥用用多了反而会消耗更多内存。只在确实需要优化的元素上加。另一个细节是animation-fill-mode。默认值是none动画结束后元素会回到初始状态。但在无限循环的场景下这个属性其实不影响最终效果因为动画永远不会结束。不过为了保险起见可以设置为both让动画在延迟期间也应用第一帧的样式。3. 完整实操流程与关键环节实现3.1 从零搭建完整代码与参数计算假设我们要做一个 5 张图的轮播每张图展示 4 秒。先算周期5 × 4 20 秒。延迟间隔是 4 秒所以五张图的animation-delay分别是-16s、-12s、-8s、-4s、0s。关键帧的百分比需要重新分配。每张图展示 4 秒占 20 秒的 20%。淡入淡出各占 8%保持占 4%剩下的 80% 是透明等待。关键帧如下keyframes fadeSlider { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title纯 CSS 自动轮播/title style * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f5f5; } .slider { position: relative; width: 90%; max-width: 800px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .slider-list { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; } .slider-item { position: absolute; inset: 0; opacity: 0; animation: fadeSlider 20s infinite both; will-change: opacity; } .slider-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .slider-item:nth-child(1) { animation-delay: -16s; } .slider-item:nth-child(2) { animation-delay: -12s; } .slider-item:nth-child(3) { animation-delay: -8s; } .slider-item:nth-child(4) { animation-delay: -4s; } .slider-item:nth-child(5) { animation-delay: 0s; } keyframes fadeSlider { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } /style /head body div classslider ul classslider-list li classslider-itemimg srchttps://picsum.photos/id/1015/800/450 alt风景一/li li classslider-itemimg srchttps://picsum.photos/id/1016/800/450 alt风景二/li li classslider-itemimg srchttps://picsum.photos/id/1018/800/450 alt风景三/li li classslider-itemimg srchttps://picsum.photos/id/1019/800/450 alt风景四/li li classslider-itemimg srchttps://picsum.photos/id/1021/800/450 alt风景五/li /ul /div /body /html这段代码可以直接复制到 HTML 文件里打开五张图会以 4 秒的间隔自动淡入淡出切换。inset: 0是top: 0; right: 0; bottom: 0; left: 0的简写现代浏览器都支持。3.2 参数计算过程为什么是这些数字很多人看代码的时候会疑惑为什么关键帧的百分比是 8%、12%、20% 这些数字。这里把计算过程完整写出来。假设有 N 张图每张展示 T 秒那么总周期 D N × T。每张图在周期中的占比是 T / D 1 / N。对于 5 张图每张占比 20%。在这 20% 的时间里需要分配淡入、保持、淡出三个阶段。我的经验分配是淡入占 40%保持占 20%淡出占 40%。所以淡入是 20% × 0.4 8%保持是 20% × 0.2 4%淡出是 20% × 0.4 8%。关键帧的节点就是0% 开始淡入8% 淡入完成12% 保持结束开始淡出20% 淡出完成之后到 100% 保持透明。这个分配比例不是固定的可以根据视觉效果调整。如果希望切换更柔和可以把淡入淡出拉长到各占 45%保持只占 10%。如果希望图片停留更久可以缩短淡入淡出拉长保持。3.3 扩展切换效果从淡入淡出到滑动淡入淡出做完了如果想改成水平滑动核心改动在关键帧的transform属性上。思路是让每张图从右侧滑入停留再向左侧滑出。keyframes slideSlider { 0% { transform: translateX(100%); opacity: 0; } 8% { transform: translateX(0); opacity: 1; } 12% { transform: translateX(0); opacity: 1; } 20% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; } }但这里有个问题滑动过程中图片会超出容器边界如果容器没有设置overflow: hidden就会看到图片滑到外面去。所以.slider的overflow: hidden是必须的。另外滑动和淡入淡出同时进行时视觉上会有点混乱通常建议滑动为主、透明度变化为辅或者干脆去掉透明度变化只靠位移来切换。如果要做缩放切换可以把transform换成scalekeyframes zoomSlider { 0% { transform: scale(1.2); opacity: 0; } 8% { transform: scale(1); opacity: 1; } 12% { transform: scale(1); opacity: 1; } 20% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } }缩放切换的视觉冲击力更强但要注意图片放大时可能会模糊所以原图分辨率要足够。3.4 响应式适配移动端的注意事项在移动端轮播图的宽高比可能需要调整。16:9 在手机上显得太扁可以改成 4:3 或者 1:1。用媒体查询来切换aspect-ratiomedia (max-width: 600px) { .slider { aspect-ratio: 4 / 3; border-radius: 8px; } }另外移动端的动画性能需要特别关注。虽然opacity和transform是合成属性但在低端安卓机上同时运行多个无限动画还是可能掉帧。一个优化手段是减少同时可见的图片数量比如只保留当前图和下一张图在 DOM 中其他的用display: none隐藏。但纯 CSS 方案下display: none会中断动画所以这个优化需要配合 JS 来做超出了纯 CSS 的范围。如果坚持纯 CSS可以给动画加上animation-timing-function: ease-in-out让淡入淡出更平滑减少视觉上的卡顿感。4. 常见问题与排查技巧实录4.1 首屏空白或闪烁这是最常见的问题。页面加载后第一张图没有立刻出现而是空白了一段时间然后才开始轮播。原因通常是animation-delay用了正值或者初始opacity设置不当。排查步骤检查animation-delay是否用了负值。负值让动画从周期中间开始页面加载时立刻处于运行状态。检查.slider-item的初始opacity是否为 0。如果是 0而动画还没开始图片就是透明的。检查animation-fill-mode是否设置为both或backwards。backwards让动画在延迟期间应用第一帧样式both则同时应用第一帧和最后一帧。我自己的习惯是animation-delay全部用负值animation-fill-mode: both初始opacity: 0。这样页面加载时第一张图会从关键帧的中间位置开始播放立刻进入淡入阶段。4.2 图片切换时出现白屏或黑屏如果容器背景是白色图片淡出后、下一张淡入前会有一瞬间看到白色背景。如果容器背景是黑色就会看到黑色。这是因为两张图的透明度在某个时间点同时接近 0。解决办法是让淡出和淡入有重叠。具体做法是调整关键帧让当前图的淡出区间和下一张图的淡入区间有交集。比如当前图在 15% 到 25% 淡出下一张图在 20% 到 30% 淡入这样在 20% 到 25% 之间两张图都有一定的透明度叠加在一起就不会出现空白。但纯 CSS 方案下每张图的动画是独立的很难精确控制两张图之间的重叠。一个折中方案是给容器设置一个与图片主色调相近的背景色这样即使有短暂空白也不会太突兀。4.3 动画不同步或错位如果发现图片切换的节奏不对比如某张图停留时间特别短或者两张图同时可见通常是animation-delay的间隔算错了。检查公式延迟间隔 周期 / 图片数量。如果图片数量是 5周期是 20 秒间隔就是 4 秒。五张图的延迟应该是-16s、-12s、-8s、-4s、0s。如果写成-15s、-10s、-5s、0s、5s节奏就会乱。另外animation-duration必须所有图片一致否则周期不同延迟间隔就对不上了。4.4 常见问题速查表问题现象可能原因排查方法解决方案首屏空白延迟为正值或初始透明度为 0检查animation-delay和opacity改用负延迟设置fill-mode: both切换时白屏两张图透明度同时为 0检查关键帧的淡入淡出区间调整关键帧让淡入淡出重叠或设置容器背景色节奏错乱延迟间隔计算错误核对周期和图片数量重新计算延迟间隔确保等分周期图片变形未设置object-fit检查img样式添加object-fit: cover容器高度塌陷子项绝对定位脱离文档流检查容器高度设置aspect-ratio或固定高度移动端卡顿动画过多或图片过大用开发者工具查看帧率压缩图片减少同时动画的元素动画不循环缺少infinite检查animation简写添加infinite关键字4.5 独家避坑经验坑一图片加载时机。纯 CSS 轮播不依赖 JS但图片是异步加载的。如果图片很大第一张图可能还没加载完动画就已经开始了用户会看到空白。解决办法是给图片设置合适的尺寸或者用background-image配合background-size: cover让浏览器提前知道图片的显示尺寸。另外可以用loadingeager让第一张图优先加载。坑二will-change的副作用。will-change: opacity确实能提升动画性能但如果页面上有几十个元素都加了will-change浏览器会为每个元素创建独立的合成层内存占用飙升。我的经验是只在轮播容器上加不要在每个slider-item上加。坑三animation-play-state的妙用。如果希望鼠标悬停时暂停轮播可以给.slider:hover .slider-item设置animation-play-state: paused。这个技巧在桌面端很实用用户想仔细看某张图时悬停就能暂停。.slider:hover .slider-item { animation-play-state: paused; }坑四减少重绘。opacity和transform是合成属性不会触发重绘和重排。但如果关键帧里用了width、height、margin这些属性就会触发重排性能急剧下降。所以关键帧里只操作opacity和transform其他属性一律不动。坑五图片数量与周期的平衡。图片太多周期太长用户可能等不到后面的图图片太少周期太短切换太频繁视觉上很累。我的经验是 3 到 6 张图比较合适每张展示 3 到 5 秒总周期控制在 12 到 30 秒之间。4.6 调试技巧用开发者工具看动画Chrome DevTools 的 Animations 面板是调试 CSS 动画的利器。打开方式F12 → More tools → Animations。在面板里可以看到所有正在运行的动画调整播放速度甚至逐帧查看。我调试轮播的时候经常把播放速度调到 10%这样能清楚地看到每张图的淡入淡出过程确认关键帧的百分比是否合理。另外Elements 面板里选中.slider-item在 Styles 里可以看到animation的简写被展开成各个子属性方便核对duration、delay、iteration-count是否正确。4.7 兼容性处理aspect-ratio在 Chrome 88、Firefox 89、Safari 15 都支持兼容性已经很好。如果需要兼容更老的浏览器可以用padding-top百分比方案.slider { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ overflow: hidden; } .slider-list { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }inset属性在 Chrome 87 支持老浏览器可以用top: 0; right: 0; bottom: 0; left: 0替代。object-fit在 IE 上不支持如果项目需要兼容 IE只能用背景图方案。提示如果项目需要兼容 IE11纯 CSS 轮播的很多特性都用不了建议直接上 JS 方案或者用背景图配合background-position动画。4.8 性能实测数据我在一台中端安卓机上做过测试5 张 800×450 的图片纯 CSS 轮播页面加载后的帧率稳定在 58 到 60 FPS内存占用约 45MB。如果把图片换成 1920×1080 的大图帧率会降到 45 FPS 左右内存占用升到 80MB。所以图片尺寸对性能影响很大建议根据实际显示尺寸来压缩图片不要直接放原图。另一个测试是同时运行 3 个轮播帧率降到 40 FPS 左右说明多个无限动画确实会互相影响。如果页面上有多个轮播建议错开它们的动画周期避免所有轮播同时切换造成瞬间的性能峰值。4.9 后续扩展方向纯 CSS 轮播做完了如果想加指示点可以用:target或者input[typeradio]配合:checked来实现手动切换。但纯 CSS 的手动切换和自动播放会有冲突需要更复杂的动画控制。我的建议是如果确实需要手动切换还是引入少量 JS 来控制animation-play-state和animation-delay这样更灵活。如果想加文字说明可以在.slider-item里加一个div用绝对定位放在底部配合background: linear-gradient做渐变遮罩。文字也可以加淡入动画和图片同步。如果想做响应式图片可以用srcset和sizes属性让浏览器根据屏幕宽度加载不同尺寸的图片。这个和纯 CSS 轮播不冲突只是 HTML 层面的优化。我在实际项目里用这套方案做过一个产品展示页5 张图每张 4 秒总周期 20 秒。上线后跑了三个月没有出现动画卡顿或错位的问题。唯一一次异常是运营换了一张 4MB 的大图导致移动端加载缓慢首屏空白了两秒。后来把图片压缩到 200KB 以内问题就解决了。所以图片优化这件事再怎么强调都不为过。