以下是一些基於問題的標題，它們抓住了文章的精髓： 簡短而直接： * 如何在 CSS 中製作平滑水平移動的動畫而不消失元素？ * CSS 動畫：Ac

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

這個問題尋求一個純CSS 動畫來在左側之間水平移動div。其容器的右邊緣。使用簡單左值的挑戰是，當從右向左移動時，元素會暫時消失。

為了克服這個問題，提供的答案建議利用與左或右組合的變換。這消除了對固定值的需求：

<code class="css">@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform:translateX(-100%);
  }
}</code>

透過使用以下CSS 將此動畫應用於div：

<code class="css">#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate
}</code>

div 在容器邊緣之間水平移動，保持它在整個動畫中的可見性。該解決方案是通用的，可以應用於任何具有絕對定位的 div，無論其寬度如何。

以上是以下是一些基於問題的標題，它們抓住了文章的精髓： 簡短而直接： * 如何在 CSS 中製作平滑水平移動的動畫而不消失元素？ * CSS 動畫：Ac的詳細內容。更多資訊請關注PHP中文網其他相關文章！