以下是一些基于问题的标题，它们抓住了文章的精髓： 简短而直接： * 如何在 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中文网其他相关文章！