generic css анимация для левого правого движения

В этой статье мы рассмотрим создание общей анимации CSS, чтобы переместить дивирование влево и правое, достигнув края контейнера. Эта анимация может быть применена к любому DIV с абсолютным позиционированием, независимо от его неизвестной длины.

. Вопрос: использование левого непосредственно вызывает мгновенное исчезновение

изначально, используя левые на 0%, а 100% может привести к тому, что Div на мгновение исчезнет. Это связано с тем, что при 100%левое свойство Div превышает ширину контейнера, что приводит к отрицательному значению и позиции с экрана.

более плавное решение: микширование преобразования и лево

, чтобы решить эту проблему и достичь плавного линейного движения, мы введем преобразование. Это позволяет нам перемещать DIV относительно его текущей позиции, гарантируя, что он не превышает границы контейнера.

Вот обновленная версия анимации с использованием Transform:

@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  /* ... */
  animation: destraSinistra 1s linear infinite alternate;
}