如何为容器内的 Div 创建平滑的左右 CSS 动画？

左右移动的通用 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中文网其他相关文章！