Чтобы создать простой эффект автоматической боковой прокрутки в CSS, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:

1. CSS Marquee: свойство CSS marqueeпозволяет создать эффект прокрутки для текста или других элементов. Вы можете установить направление, скорость и поведение прокрутки с помощью свойств CSS.

.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

2. CSS-анимация: вы можете использовать CSS-анимацию для достижения эффекта боковой прокрутки. Применяя анимацию по ключевым кадрам, вы можете анимировать элемент из его исходного положения в желаемое конечное положение.

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.scroll {
  width: 100%;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

3. Сочетание CSS-преобразования и анимации. Другой метод — использовать CSS-преобразование вместе с анимацией для достижения эффекта прокрутки.

.scroll {
  width: 100%;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
  overflow: hidden;
}
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

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