CSS 中的左右移动：通用解决方案

许多 Web 开发人员遇到沿水平轴设置 DIV 元素动画的挑战，绑定通过容器的边缘。此任务很复杂，因为固定值可能会导致元素暂时消失。

为了解决此问题，可以采用通用 CSS 动画将 DIV 从左到右无缝移动。然而，使用 0% 和 100% 的 left 属性可能会导致闪烁，因为元素完全脱离屏幕。

为了克服这个问题，建议结合使用变换和 left 或 right 属性。此方法将元素保留在屏幕上，同时提供所需的移动。

例如，以下 CSS 代码可实现此效果：

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}

此技术可确保 DIV 在其容器的左边缘和右边缘之间平滑过渡，为任何具有绝对定位的 DIV 提供通用解决方案。