CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Janath
Janath

Reputation: 1248

Detect css animation stop

I have a spaceship object in my website that moves to left to right(end to the view port) in the screen.

I need to show another spaceship object moves right to left once that above mentioned spaceship object reach to end(screen view port).

The problem

I tried to give second spaceship object "animation delay" but it's not working as I wanted. Because browser width different from screen to screen.

Here is my code.

.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>

Here is the Jsfiddle Any ideas?

Upvotes: 0

Views: 77

Answers (1)

toto1911
toto1911

Reputation: 491

If you want the second animation to start right after the first one, you have to set an animation-delay equal to the animation-duration of the first one, witch is 10s. And also you should make both of them absolute.

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>

The fiddle : https://jsfiddle.net/sph8f6ty/

Upvotes: 1

Related Questions