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

Метод 1. CSS-анимация и ключевые кадры

1. Создайте элемент-контейнер с фиксированной шириной и установите для свойства CSS overflow-xзначение "scroll", чтобы включить горизонтальную прокрутку.
2. Внутри контейнера создайте дочерний элемент, который будет служить содержимым для прокрутки.
3. Определите анимацию CSS, используя @keyframes
4. Примените анимацию к элементу контента с помощью свойства animation, указав бесконечную продолжительность и желаемую функцию синхронизации анимации.

Вот пример:

<style>
  .container {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .content {
    display: inline-block;
    animation: scroll 10s infinite;
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>
<div class="container">
  <div class="content">
    <!-- Add your content here -->
  </div>
</div>

Метод 2: CSS-переходы и JavaScript

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

Вот пример:

<style>
  .container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .content {
    display: inline-block;
    transition: transform 10s linear;
  }
</style>
<div class="container">
  <div class="content">
    <!-- Add your content here -->
  </div>
</div>
<script>
  const container = document.querySelector('.container');
  const content = document.querySelector('.content');
  const clone = content.cloneNode(true);
  container.appendChild(clone);
  function scroll() {
    container.scrollLeft++;
    if (container.scrollLeft >= content.offsetWidth) {
      container.scrollLeft = 0;
    }
  }
  setInterval(scroll, 10);
</script>