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 提供通用解決方案。