如何實現DIV元素左右動畫平滑不閃爍？

CSS 中的左右移動：通用解決方案

許多Web 開發人員遇到沿水平軸設定DIV 元素動畫的挑戰，綁定通過容器的邊緣。此任務很複雜，因為固定值可能會導致元素暫時消失。

為了解決此問題，可以採用通用 CSS 動畫將 DIV 從左到右無縫移動。但是，使用 0% 和 100% 的 left 屬性可能會因元素完全脫離螢幕而導致閃爍。

為了克服此問題，建議結合使用轉換和 left 或 right 屬性。此方法將元素保留在螢幕上，同時提供所需的移動。

例如，以下 CSS 程式碼可實現此效果：

<code class="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;
}</code>

此技術可確保 DIV 在其容器的左右邊緣，為任何具有絕對定位的 DIV 提供通用解決方案。

以上是如何實現DIV元素左右動畫平滑不閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！