Для создания анимации, движущейся слева направо, в 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. Вы можете настроить продолжительность, повторяемость, оттенок анимации и другие параметры в соответствии с вашими потребностями.