Как сделать бесконечною анимацию в сторону

Question

Вот есть анимация (код ниже), которая заставляет элемент двигаться вправо и назад влево, а как сделать бесконечную анимацию в одну сторону? Например блок движется вправо и когда заканчивается страница появляется в левой части страницы и снова вправо и так дале

html:

  <body>
    <div class="element"></div>
  </body>

css:

.element {
  height: 70px;
  width: 270px;
  border-radius: 15px;
  margin:0 50% 0 50%;
  background-color: red;
  animation: 
    nudge 5s linear infinite alternate;
}


@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(300px, 0);
  }

  80% {
    transform: translate(-300px, 0);
  }
}

Answer 1

body { overflow-x: hidden; margin: 0; }

.element {
  height: 70px;
  width: 270px;
  border-radius: 15px;
  margin-top: 10px;
  background-color: red;
  animation: nudge 5s linear infinite;
}

@keyframes nudge {
  0% { transform: translatex(-100%); }
  100% { transform: translatex(100vw); }
}

<div class="element"></div>

БЛОГ НА HUSL

Как сделать бесконечною анимацию в сторону

Ответы (1 шт):