[SOLVED] What's wrong in my code?

Question

https://sololearn.com/compiler-playground/WFyiOB6hvjZV/?ref=app

In this code, I simply want jake to jump just once and barrier moves left to right endlessly.
But as I run it, Both jake and barrier fly....
Why is that? And how to fix this?

animation-delay is one of the solutions but I just don't want to delay animation....

I want jake to jump just once and barrier keeps moving left to right endlessly without any delay...

Answer 1

I think you accidentally nested .barriers inside .jake, that's why the barriers are part of the animation of .jake too.

Remove the </div> in line 13, and close the div tag in line 8.

Answer 2

In ur html, barrier div is inside jake div. So naturally it inherits the animation u place on it.

On a side note, if u are trying to make a gane like that, thats not how u do it. I highly recommend u leaen js.

Answer 3

Thanks. Problem was actually in div..