CSS动画如何实现图片轮播滑动_transform translateX @keyframes应用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS动画如何实现图片轮播滑动_transform translateX @keyframes应用

2025-11-29

浏览次数：次

返回列表

使用CSS transform和@keyframes结合translateX可实现无J*aScript的图片轮播滑动效果。1. HTML结构采用flex布局将多张图片水平排列，外层容器设置overflow: hidden形成可视窗口；2. CSS中通过animation调用@keyframes定义的位移动画，按时间点依次应用translateX(-25%、-50%等)实现逐图位移；3. 关键帧分0%到100%，每25%对应一张图的切换，配合8s无限循环动画达成自动播放；4. 可添加ease-in-out缓动提升流畅度，复制首图至末尾或调整关键帧时序可逼近无缝循环。该方法依赖纯CSS，性能优异，适用于静态内容轮播，需注意统一图片尺寸与容器适配。

css动画如何实现图片轮播滑动_transform translatex @keyframes应用

图片轮播滑动效果可以通过CSS的 transform 和 @keyframes 配合 translateX 实现，无需J*aScript也能做出平滑自动播放的动画。核心思路是利用关键帧定义位移变化，再通过 transform 改变图片容器的位置来实现滑动视觉效果。

1. 基本结构：HTML布局

轮播图通常使用一个外层容器包裹多张图片，并将所有图片水平排列在一行中：

2. CSS样式设置容器与图片

让图片横向排列并隐藏溢出部分，形成“滑动窗口”效果：

.carousel {
  display: flex;
  width: 400%; /* 四张图占四倍宽度 */
  height: 300px;
  animation: slide 8s infinite alternate;
}

.carousel img {
  width: 25%; / 每张图占容器1/4 /
  height: 100%;
  object-fit: cover;
}

/ 外层容器控制可视区域 /
.car-container {
width: 100%;
overflow: hidden;
}

3. 使用 @keyframes 定义 translateX 动画

通过关键帧改变 transform: translateX() 的值，使图片组从左向右或循环滑动：

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(-100%);
  }
}

上面的关键帧表示：每25%时间点移动一张图的宽度（-25%, -50%...），从而实现连续滑动。animation 设置为 8s 表示一轮切换耗时8秒，infinite 表示无限循环。