Как подключить анимацию?

Question

[cracker-test]

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>
<div class="element"></div>
<div class="element"></div>

Подскажите, как сделать чтобы элементы вылетали влево по очереди т.е. сначала первый потом второй и потом третий и после анимация заканчивалась?

Comments

[Одиночка Айс]

3 разных анимации с задержкой или библиотеки, типа AOS.js

[cracker-test]

Одиночка Айс, анимация не при скроле

[Сергей Сергей]

замысел, думаю, понятен.

Answer 1

[MrColdCoffee]

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

.element {
  height: 70px;
  width: 270px;
  border-radius: 15px;
  margin-top: 10px;
  background-color: red;
  transform: translateX(-100%);
  animation: nudge 5s linear;
}

.element:nth-child(2){
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}
.element:nth-child(3){
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    animation-delay: 10s;
}

@keyframes nudge {
  100% { transform: translateX(100vw); }
}

Comments

[Ankhena]

Из префиксов для этого свойства нужен только -webkit-
Это кроме того, что в исходники префиксы не стоит писать.

Answer 2

[DanielTonne]

Только вам остается подкорректировать саму анимацию

https://codepen.io/soffrire/pen/BamvVry

Comments

[cracker-test]

они должны уходить по очереди, а не все сразу. в этом у меня и была проблема