Для создания анимации, движущейся слева направо, в CSS можно использовать свойство @keyframes
в сочетании с свойством animation
. Вот как можно это сделать:
- Создайте анимацию с помощью
@keyframes
. Назовите ее, например,slideLeftToRight
. Задайте начальное состояние (from
) и конечное состояние (to
) анимации, определяющие движение элемента. Например:
@keyframes slideLeftToRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
- Примените анимацию к элементу с помощью свойства
animation
. Вы можете установить его в элементе или его классе. Укажите имя анимации (slideLeftToRight
) и продолжительность анимации. Например:
.element { animation: slideLeftToRight 1s; }
- Если вы хотите, чтобы анимация повторялась или продолжала повторяться, добавьте свойство
animation-iteration-count
с нужным значением в CSS правило. Например, чтобы анимация повторилась 3 раза, используйте:
.element { animation: slideLeftToRight 1s; animation-iteration-count: 3; }
- Можно добавить плавное затухание анимации, используя свойство
animation-timing-function
. Например:
.element { animation: slideLeftToRight 1s ease-in-out; }
Теперь ваш элемент будет двигаться слева направо с помощью анимации, которую вы создали с использованием CSS. Вы можете настроить продолжительность, повторяемость, оттенок анимации и другие параметры в соответствии с вашими потребностями.