如何通过css animation实现轮播图过渡效果-css教程-PHP中文网

如何通过css animation实现轮播图过渡效果

P粉602998670

发布： 2025-09-28 17:23:01

原创

577人浏览过

通过CSS Animation与@keyframes实现轮播图过渡效果，可采用淡入淡出或滑动动画。1. 淡入淡出：利用opacity变化，结合animation-delay错开每张图片的播放时机，形成循环切换；2. 滑动效果：使用transform: translateX配合透明度变化，定义关键帧实现图片左右滑入滑出；3. 注意设置容器固定尺寸、object-fit: cover、初始opacity为0，并合理配置动画时长与延迟，确保流畅无缝切换，适用于PC与移动端。

如何通过css animation实现轮播图过渡效果

实现轮播图的过渡效果，可以通过 CSS Animation 结合关键帧（@keyframes）来控制图片的进出动画。下面是一种常见且实用的方法，使用淡入淡出（fade）或滑动（slide）效果实现平滑切换。

1. 使用淡入淡出（Fade）动画

这是最常用的轮播图过渡方式之一，通过改变透明度实现图片切换。

【HTML 结构】

假设你有三张图片：

<div class="carousel"><br>  <img src="image1.jpg" class="slide fade" style="animation-delay: 0s;"><br>  <img src="image2.jpg" class="slide fade" style="animation-delay: 3s;"><br>  <img src="image3.jpg" class="slide fade" style="animation-delay: 6s;"><br></div>

登录后复制

立即学习“前端免费学习笔记（深入）”；

【CSS 样式】

定义容器和动画关键帧：

.carousel {<br>  position: relative;<br>  width: 100%;<br>  height: 400px;<br>  overflow: hidden;<br>}

登录后复制

.slide {<br>  position: absolute;<br>  width: 100%;<br>  height: 100%;<br>  object-fit: cover;<br>}

登录后复制

.fade {<br>  opacity: 0;<br>  animation-name: fadeInOut;<br>  animation-duration: 3s;<br>  animation-timing-function: ease-in-out;<br>  animation-iteration-count: infinite;<br>}

登录后复制

@keyframes fadeInOut {<br>  0% { opacity: 0; }<br>  16% { opacity: 1; }<br>  33% { opacity: 1; }<br>  50% { opacity: 0; }<br>  100% { opacity: 0; }<br>}

登录后复制

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

每张图片设置不同的 animation-delay，使其依次播放动画，形成循环轮播。例如第一张 0s 开始，第二张 3s，第三张 6s，总周期为 9s，每张显示约 1.5 秒后淡出。

2. 使用滑动（Slide）动画

如果你想实现左右滑动切换效果，可以使用 transform 配合 @keyframes。

【关键帧定义】

@keyframes slideInRight {<br>  0% { transform: translateX(100%); opacity: 0; }<br>  10% { transform: translateX(0); opacity: 1; }<br>  30% { transform: translateX(0); opacity: 1; }<br>  40% { transform: translateX(-100%); opacity: 0; }<br>  100% { transform: translateX(-100%); opacity: 0; }<br>}

登录后复制

然后将该动画应用到每张图片，并设置递增的延迟时间：

.slide.slide-animation {<br>  animation-name: slideInRight;<br>  animation-duration: 4s;<br>  animation-timing-function: ease-in-out;<br>  animation-iteration-count: infinite;<br>}

登录后复制

同样，通过内联样式或类控制每张图的 animation-delay，如 0s、4s、8s 等，实现连续滑动。