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中文网其他相关文章！