首頁 > web前端 > css教學 > 主體

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

Susan Sarandon
發布: 2024-10-30 12:34:03
原創
369 人瀏覽過

How to Create a Smooth Left-Right CSS Animation for a Div Within Its Container?

左右移動的通用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!