CSS文字无限循环动画问题：滑动中断与多行循环实现求助

问题分析 #

当前实现存在三个核心问题：

• 网格布局冲突：固定列数的网格配置与元素固定宽度不匹配，且元素数量不足以填满3行5列的网格，导致滚动到末尾出现空白“中断”。
• 无缝循环逻辑错误：仅重复一次元素，动画移动距离为整个容器宽度，无法实现内容衔接。
• 3行布局未达标：没有确保每行都加载完整的元素组，滚动时内容不连贯。

修改方案及代码 #

1. 调整元素重复逻辑 #

在计算属性中重复4次元素数组，3次用于填满3行布局，1次用于实现无缝循环的内容衔接：

combinedItems() {
  return [...this.items, ...this.items, ...this.items, ...this.items];
}

2. 修正网格布局配置 #

移除固定列数设置，改用grid-auto-flow: column让元素自动横向排列，同时保留3行配置：

.tech-box-wrapper {
  display: grid;
  animation: marquee 14s infinite linear;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

3. 调整动画移动距离 #

将动画终点改为移动一组元素的宽度（即容器总宽度的1/4），确保动画结束时内容与开头完全衔接：

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-calc(100% / 4));
  }
}

4. 优化元素样式 #

将固定宽度改为最小宽度，避免布局挤压：

.tech-box {
  background: #ffffff1a;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: center;
  padding: 10px;
  min-width: 300px;
  margin: 10px 10px;
}

完整修改后代码 #

Vue组件

<template>
  <div class="testi-bg">
    <div class="row text-center">
      <div class="col-md-12">
        <p class="h1 mt-5 testi-h1">Looping</p>
      </div>
    </div>
    <div class="tech-container">
      <div class="tech-box-wrapper">
        <div
          v-for="(item, index) in combinedItems"
          :key="index"
          class="tech-box"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data: () => ({
    items: ["hello1", "hello2", "hello3", "hello4", "hello5"],
  }),
  computed: {
    combinedItems() {
      return [...this.items, ...this.items, ...this.items, ...this.items];
    },
  },
};
</script>

CSS样式

<style scoped>
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-calc(100% / 4));
  }
}

.tech-container {
  overflow: hidden;
  width: 100%;
}

.tech-box-wrapper {
  display: grid;
  animation: marquee 14s infinite linear;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

.tech-box {
  background: #ffffff1a;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0em;
  text-align: center;
  padding: 10px;
  min-width: 300px;
  margin: 10px 10px;
}
</style>

内容的提问来源于stack exchange，提问作者Code for life