CSS中絕對定位div如何實現平滑的左右移動？

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

在網頁設計領域，使元素具有流動性的動畫效果至關重要。然而，當涉及到絕對定位的 div 的左右移動時，會出現一個常見的挑戰：元素會消失一會兒然後重新出現。此問題通常源自於不正確的動畫過渡。

要解決此問題，必須避免使用左側或右側的固定值。相反，請考慮將變換屬性與 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>

在此更新的程式碼中，我們在其中使用了translateX(-100%)變換屬性將元素100% 向左移動，從而避免任何可見的消失。這確保了平滑且線性的左右移動，沒有任何中斷。

以上是CSS中絕對定位div如何實現平滑的左右移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！