如何使用css或js实现这种动画？

Question

我正在尝试实现这种项目一直向右移动然后从后面出现的动画：

但是我的代码不起作用，它只是在错误的时间和错误的位置返回左侧这是我的代码：

.floatingItem {
  flex: 0 0 auto;
  width: 130px;
  height: 200px;
  animation: moveRight 2s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 100ms all ease-in;
  img {
    width: 100px;
    height: 110px;
    transition: 100ms all ease-in;
  }
}

.fi2 {
  margin-top: 0;
}

@keyframes moveRight {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(100%);
  }
}

<div class="floatingItems">

  <div class="floatingItem">

    <img class="floatImage" src="itemImage" alt="">

  </div>

</div>

Answer 1

animation where the items keep going right and then comes from behind

这是一个移动的横幅效果。 translate 适用于元素本身的尺寸，所以在你的情况下，它只会向右移动等于它自己的宽度，然后跳回到它的原始位置，它不会一直移动到它的末尾parent.

要制作横幅效果，您可以绝对定位元素并为其设置动画 right 属性，这是相对于 parent:

.floatingItems {
  position: relative;
  height: 200px;
  background: dodgerblue;
}

.floatingItem {
  position: absolute; 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 200px;
  animation: moveRight 2s linear infinite;
  background: #fff;
}

img {
  width: 100px;
  height: 110px;
}

@keyframes moveRight {
  0% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}

<div class="floatingItems">
  <div class="floatingItem">
    <img class="floatImage" src="https://picsum.photos/200/300" alt="">
  </div>
</div>

Answer 2

给定的重叠六边形布局假定有足够的至少覆盖视口的宽度。

此处我们假设已将足够多的图标或副本放入一行以确保覆盖宽度。

虽然可以单独为每个图标制作动画，但它非常混乱，并且可能比单个动画消耗更多 CPU/GPU 并且存在时间可能有点失调的危险（尽管很小）。

相反，我们在这里将图标与完整副本组合在一起以形成一行。这样我们就可以连续滚动。

CSS 变量用于设置相对计算的宽度和边距，以便整体可以响应，图标大小有上限和下限，因此它们保持可读性但不会接管屏幕太大。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.icons {
  --w: clamp(50px, 10vmin, 100px); /* don't let the icons get too big or too small */
  --n: 15; /* number of icons in each group (a group plus a copy of the group form a line) */
  --m: calc(var(--w) / 20); /* margin on each icon */
  /* for a totally general solution when there aren't many icons would need to adjust margin on each icon so one group at least fills width of viewport */
  position: fixed;
  bottom: 0;
  z-index: 99999;
}
.line {
  white-space: nowrap;
  animation: scroll 20s infinite linear;
  position: relative;
  --y: 0%;
}
.line:nth-child(2) {
  left: calc((var(--w) / -2) - var(--m)); /* offset the second line */
  --y: -25%;
}
.icon {
  width: var(--w);
  height: auto;
  margin: var(--m);
  display: inline-block;
  position: relative;
}
@keyframes scroll {
  0% {
    transform: translateX(-50%) translateY(var(--y));
  }
  100% {
    transform: translateX(0%) translateY(var(--y));
  }
}

<div class="icons">
  <div class="line">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
    <!-- this is a copy of the group above -->
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
  </div>
  <div class="line">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">

    <!-- this is a copy of the group above -->
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">
      <img class="icon" src="https://i.stack.imgur.com/wzsQv.png.png">
      <img class="icon" src="https://i.stack.imgur.com/TqwFZ.png.png">
      <img class="icon" src="https://i.stack.imgur.com/a3lIe.png.png">

  </div>
</div>

注意：似乎至少某些浏览器在用于顶部定位的计算值方面存在问题，因此底线向上平移而不是设置顶部（使六边形 'nestle' 成为第一行）

如何使用css或js实现这种动画？

How can I achieve this kind of animation using css or js?

html

css

animation

sass

css-animations