Как сделать анимацию слева направо?

Для создания анимации, движущейся слева направо, в CSS можно использовать свойство @keyframes в сочетании с свойством animation. Вот как можно это сделать:

1. Создайте анимацию с помощью @keyframes. Назовите ее, например, slideLeftToRight. Задайте начальное состояние (from) и конечное состояние (to) анимации, определяющие движение элемента. Например:

@keyframes slideLeftToRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

2. Примените анимацию к элементу с помощью свойства animation. Вы можете установить его в элементе или его классе. Укажите имя анимации (slideLeftToRight) и продолжительность анимации. Например:

.element {
  animation: slideLeftToRight 1s;
}

3. Если вы хотите, чтобы анимация повторялась или продолжала повторяться, добавьте свойство animation-iteration-count с нужным значением в CSS правило. Например, чтобы анимация повторилась 3 раза, используйте:

.element {
  animation: slideLeftToRight 1s;
  animation-iteration-count: 3;
}

4. Можно добавить плавное затухание анимации, используя свойство animation-timing-function. Например:

.element {
  animation: slideLeftToRight 1s ease-in-out;
}

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