如何实现DIV元素左右动画平滑不闪烁？

CSS 中的左右移动：通用解决方案

许多 Web 开发人员遇到沿水平轴设置 DIV 元素动画的挑战，绑定通过容器的边缘。此任务很复杂，因为固定值可能会导致元素暂时消失。

为了解决此问题，可以采用通用 CSS 动画将 DIV 从左到右无缝移动。但是，使用 0% 和 100% 的 left 属性可能会因元素完全脱离屏幕而导致闪烁。

为了克服此问题，建议结合使用转换和 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>

此技术可确保 DIV 在其容器的左右边缘，为任何具有绝对定位的 DIV 提供通用解决方案。

以上是如何实现DIV元素左右动画平滑不闪烁？的详细内容。更多信息请关注PHP中文网其他相关文章！