transition不能直接驱动轮播，必须配合opacity或transform等可动画数值属性；纯CSS轮播需用@keyframes控制显隐时机，transition仅负责平滑过渡。
transition 不能直接驱动轮播，必须配合 transform 或 opacity
很多人以为给 background-image 加 transition 就能淡入淡出，实际无效——CSS 不支持图片地址的过渡动画。真正可过渡的只有数值型属性：opacity、transform（如 translateX）、filter 等。
常见做法是把多张图片叠在同一个容器内，通过控制其中一张的 opacity 或位置来切换显示，再用 transition 平滑过渡。
- 推荐用
opacity+position: absolute实现淡入淡出，语义清晰、兼容性好 - 若要滑动效果，用
transform: translateX()配合transition: transform 0.4s ease-in-out - 避免对
width/height/left/top做过渡——会触发重排，性能差
如何用 opacity 实现淡入淡出轮播（无 JS 版）
纯 CSS 轮播依赖 @keyframes 和 animation，transition 本身不驱动自动切换，只负责“变化过程”。所以得靠 animation 控制每张图的显隐时机，再用 transition 让显隐更柔和。
.carousel img {
position: absolute;
opacity: 0;
transition: opacity 0.5s ease;
}
.carousel img:nth-child(1) { animation: fade 8s infinite 0s; }
.carousel img:nth-child(2) { animation: fade 8s infinite 2s; }
.carousel img:nth-child(3) { animation: fade 8s infinite 4s; }
@keyframes fade {
0%, 100% { opacity: 0; }
15%, 35% { opacity: 1; }
}
- 每个
img的animation-delay错开，形成循环节奏 -
transition在opacity变化时生效，让淡入淡出有缓动 - 注意：需给父容器
position: relative，否则absolute会脱离布局流
transition 持续时间与 timing-function 怎么选才自然
轮播不是越快越好。太快（0.1s）像闪烁，太慢（1.2s）拖沓。实测 0.4s–0.6s 是较舒服的区间。
立即学习“前端免费学习笔记（深入）”；
-
ease-in-out最常用：起始和结束都放缓，观感最平稳 -
cubic-bezier(0.33, 1, 0.68, 1)（类似ease-out）适合滑动轮播，收尾稍重，有“停稳”感 - 避免用
linear：机械感强，尤其淡入淡出时容易显得生硬 - 如果轮播图含文字或 UI 元素，建议加
will-change: opacity提前提示浏览器优化渲染
移动端轮播慎用 hover 触发 transition
用 :hover 控制轮播暂停/播放，在桌面端可行，但在 iOS Safari 和多数安卓浏览器中，hover 行为不可靠或根本不会触发——用户点一下可能只触发一次，再点没反应。
- 真需要交互控制，优先用
click+ 少量 JS 切换 class，比如.paused来停掉animation - 若坚持纯 CSS，可用
input[type="radio"]+label模拟按钮，通过:checked控制状态，兼容性更好 - 别忘了加
touch-action: manipulation到轮播容器，减少 iOS 上的 300ms 点击延迟
transition 只是“最后一公里”的润滑剂；真正决定体验的是动画节奏设计、图层叠加逻辑，以及是否考虑了触摸设备的响应方式。很多卡顿或闪跳问题，根源不在 transition 写得不对，而在初始状态没设全、或 opacity/transform 没配对重置。 
