Определить остановку анимации CSS

Question

У меня есть объект космического корабля на моем веб-сайте, который перемещается слева на право (конец порта просмотра) на экране.

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

Проблема

Я пытался дать второму объекту космического корабля «задержку анимации», но он не работает так, как я хотел. Поскольку ширина браузера отличается от экрана к экрану.

Вот мой код.

.spaceship-1 img {
  width: 100px;
  animation: spaceship-1 10s ease-in-out 1;
  animation-fill-mode: forwards;
}

@-webkit-keyframes spaceship-1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}

.spaceship-2 img {
  width: 100px;
  animation: spaceship-2 10s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 5s;
  position: absolute;
  right: 0;
  bottom: 15px;
}

@-webkit-keyframes spaceship-2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}

<div class="spaceship-1">
  <img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
  <img src="http://i68.tinypic.com/2lsxjpx.png" alt="">
</div>

Вот это Jsfiddle Есть идеи?

Answer 1

Если вы хотите, чтобы вторая анимация начиналась сразу после первой, вы должны установить animation-delay равным animation-duration первой, ведьма равна 10 с. А также вы должны сделать их обоих абсолютными.

body{
  background:#f6f6f6;
  overflow-x:hidden;
}

.spaceship-1 img{
  width:100px;
  animation: spaceship-1 10s ease-in-out 1 ;
  animation-fill-mode: forwards;
  position:absolute;
  left: 0;
  top: 10px;
}

 @-webkit-keyframes spaceship-1 {
 0% {
     transform: translateX(0);
   }
 100% {
      transform: translateX(calc(100vw - 100px)) ;
    }
 }
   
 .spaceship-2 img{
  width:100px;
  animation: spaceship-2 10s ease-in-out 1 ;
  animation-fill-mode: forwards;
  animation-delay:10s;
  position:absolute;
  transform: rotate(180deg);
  right: 0;
  bottom: 10px;
}

 @-webkit-keyframes spaceship-2 {
 0% {
     transform: translateX(0) rotate(180deg);
    }
  100% {
      transform: translateX(calc(-100vw + 100px)) rotate(180deg);
      }
   }

<div class="spaceship-1">
  <img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>
<div class="spaceship-2">
  <img src="http://i63.tinypic.com/24nguhx.png" alt="">
</div>

Скрипка: https://jsfiddle.net/sph8f6ty/