如何為容器內的 Div 創建平滑的左右 CSS 動畫？

左右移動的通用CSS 動畫

在本文中，我們將探索創建一個通用CSS 動畫來向左移動div向右，到達容器的邊緣。此動畫可以應用於任何具有絕對定位的 div，無論其長度未知。

問題：直接使用 Left 會導致瞬間消失

最初使用 left 0% 和 100% 會導致 div 在移動時暫時消失。這是因為在 100% 時，div 的 left 屬性超出了容器的寬度，導致出現負值並且位置超出螢幕。

更流暢的解決方案：混合 Transform 和 Left

為了解決這個問題並實現平滑的線性運動，我們引入了變換。這允許我們相對於當前位置移動 div，確保它不會超出容器的邊界。

這是使用變換的動畫的更新版本：

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

#div1 {
  /* ... */
  animation: destraSinistra 1s linear infinite alternate;
}

在此程式碼中，100% 的關鍵影格同時使用左和變換。 Left 將 div 移到右邊緣，而 Transform 進一步將其平移到左側以補償超調。這種組合有效地防止了 div 離開螢幕。

以上是如何為容器內的 Div 創建平滑的左右 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！