CSS动画：实现图片无限循环左右滑动并避免页面滚动-js教程-PHP中文网

CSS动画：实现图片无限循环左右滑动并避免页面滚动

霞舞

发布： 2025-11-07 19:30:01

原创

679人浏览过

CSS动画：实现图片无限循环左右滑动并避免页面滚动

本文详细介绍了如何利用css动画实现图片从屏幕左侧滑入，移动至右侧后再次从左侧滑入的无限循环效果，同时解决因动画元素超出视口导致的页面水平滚动问题。通过优化css `keyframes`中的`translatex`值和父容器的`overflow: hidden`属性，确保动画流畅且不影响页面布局。

在网页设计中，为图片添加动态的左右滑动效果能够显著提升页面的视觉吸引力。然而，在实现这种无限循环的动画时，开发者常会遇到一个常见问题：动画元素超出视口导致页面出现不必要的水平滚动条，从而影响整体布局，尤其是在移动端表现更为明显。本教程将深入探讨如何通过精炼的CSS动画技巧，实现流畅的图片左右循环滑动，并彻底解决水平滚动问题。

理解并解决水平滚动问题

最初的实现尝试可能导致滚动条出现，其核心原因在于动画元素（image-container）的宽度设置和transform: translateX的起始/结束值。当image-container被设置为width: 100vw（即100%视口宽度），并且动画从translateX(0%)移动到translateX(100%)时，translateX(100%)意味着元素将向右移动其自身宽度的100%。如果元素本身已经占据了整个视口宽度，那么这个额外的移动就会导致其超出视口范围，从而触发水平滚动条。

要解决此问题，我们需要确保以下两点：

动画元素本身不直接造成视口溢出。
动画的起始和结束位置能够让元素在屏幕外完全隐藏，并在屏幕内流畅展现，同时不扩展父容器的有效宽度。

优化动画关键帧与容器设置

为了实现图片从左侧完全进入、向右侧完全滑出，然后再次从左侧进入的无限循环效果，同时避免滚动条，我们需要对@keyframes和相关容器的CSS属性进行调整。

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

1. 调整 slideAnimation 关键帧

关键在于将动画的起始和结束位置调整到屏幕外部。

translateX(-100%)：使元素从其自身宽度的100%处开始，即完全位于父容器的左侧屏幕外。
translateX(100%)：使元素移动到其自身宽度的100%处结束，即完全位于父容器的右侧屏幕外。

这样，在动画过程中，图片会从左侧屏幕外进入，穿过屏幕，然后从右侧屏幕外消失，形成一个无缝循环。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

@keyframes slideAnimation {
  0% {
    transform: translateX(-100%); /* 图片从左侧屏幕外开始 */
  }
  100% {
    transform: translateX(100%);  /* 图片向右侧屏幕外移动 */
  }
}

登录后复制

2. 配置父容器 (.row-1)

父容器的作用是提供一个裁剪区域，确保动画元素在屏幕外移动时不会被看到，也不会影响页面的布局。

overflow: hidden;: 这是防止水平滚动条的关键。它会裁剪掉任何超出其边界的内容。
position: relative;: 当子元素使用position: absolute时，父元素需要设置为position: relative（或其他非static定位），以确保子元素的绝对定位是相对于父元素而非文档根元素。
width: 100%; height: 100%;: 确保父容器占据其可用空间，为动画提供足够的舞台。

.row-1 {
  overflow: hidden; /* 隐藏超出容器的内容，防止滚动条 */
  position: relative; /* 为子元素的绝对定位提供参考 */
  width: 100%;
  height: 100%;
  /* 其他样式，如display: flex; flex-direction: column; align-items: flex-start; 根据需要保留或移除 */
}

登录后复制

3. 配置动画元素容器 (.image-container)

动画元素容器负责承载实际的图片并应用动画。

position: absolute;: 使元素脱离文档流，方便定位。
top: 4%;: 根据需要调整垂直位置。
width: 100%;: 关键改变。不再使用100vw。width: 100%意味着image-container的宽度将与其父容器（.row-1）的宽度相同。这样，当translateX(-100%)和translateX(100%)时，百分比是相对于其父容器的宽度，而父容器已经通过overflow: hidden进行了裁剪。
animation: slideAnimation 18s linear infinite;: 应用之前定义的动画。

.image-container {
  position: absolute;
  top: 4%;
  width: 100%; /* 宽度设置为父容器的100%，而非视口100vw */
  animation: slideAnimation 18s linear infinite;
}

登录后复制

完整代码示例

结合上述优化，以下是实现图片无限循环左右滑动且无滚动条的完整HTML和CSS代码：

HTML 结构

<div class="row-1">
  <div class="image-container">
    <img class="img" src="/src/assets/image.svg" alt="Animated Image">
  </div>
</div>

登录后复制

CSS 样式

/* 关键帧定义 */
@keyframes slideAnimation {
  0% {
    transform: translateX(-100%); /* 从左侧屏幕外开始 */
  }
  100% {
    transform: translateX(100%);  /* 移动到右侧屏幕外结束 */
  }
}

/* 父容器 */
.row-1 {
  overflow: hidden; /* 隐藏超出内容，防止滚动条 */
  position: relative; /* 为绝对定位的子元素提供参考 */
  width: 100%; /* 占据父级的全部宽度 */
  height: 100%; /* 占据父级的全部高度 */
  /* 根据需要，可以保留或调整以下样式 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 动画元素容器 */
.image-container {
  position: absolute; /* 绝对定位 */
  top: 4%; /* 垂直偏移 */
  width: 100%; /* 宽度为父容器的100% */
  animation: slideAnimation 18s linear infinite; /* 应用动画 */
  /* 如果图片本身比容器小，可能需要设置图片样式 */
  /* .image-container img {
    width: 100%;
    height: auto;
    display: block;
  } */
}

登录后复制

效果与注意事项

通过上述优化，图片将从左侧完全滑入视口，然后向右侧移动直至完全滑出视口，接着再次从左侧无缝进入，形成一个流畅的无限循环动画，且不会导致页面出现水平滚动条。

实施提示：

图片尺寸： 确保img标签中的图片尺寸与image-container的预期尺寸相匹配，或者通过CSS（例如width: 100%; height: auto;）来控制图片在其容器内的显示。
动画速度： 18s linear infinite 中的 18s 控制动画持续时间，linear 表示匀速，infinite 表示无限循环。根据实际需求调整这些值。
性能： 使用transform属性进行动画比直接改变left或right属性更具性能优势，因为它利用了GPU加速。
响应式设计： 这种基于百分比和overflow: hidden的方法天然具有较好的响应式特性，因为width: 100%会适应不同屏幕尺寸的父容器。
可访问性： 对于长时间循环的动画，考虑为用户提供暂停或停止动画的选项，特别是对于有运动敏感的用户。可以使用prefers-reduced-motion媒体查询来提供更静态的体验。

总结

实现图片无限循环左右滑动动画并避免页面水平滚动，关键在于精确控制动画元素的起始/结束位置，并利用父容器的overflow: hidden属性进行裁剪。通过将translateX的范围设置为(-100%)到(100%)，并确保动画容器的宽度设置为100%而非100vw，我们可以构建出既美观又不会破坏页面布局的流畅动画效果。这种方法不仅解决了常见的布局问题，也为创建更复杂的动画效果奠定了基础。

以上就是CSS动画：实现图片无限循环左右滑动并避免页面滚动的详细内容，更多请关注php中文网其它相关文章！