CSS3 Animation Issues

Question

This is my first question and I'm so happy for it

I created a page with fullpage.js Roadmap

I would create an animation with CSS3, so I saw a light tutorial

I followed the instructions and pasted the code into roadmap.html. The animation works well, but I don’t know why there are 14 rockets with a blue frame. You can see the "crash" here

Any error with js? Is this a problem with css?

<style>#outerspace{position:relative;height:400px;background:#0c0440 url('http://www.the-art-of-web.com/images/rocket.gif');color:#fff;}div.rocket{position:absolute;bottom:10px;left:20px;-webkit-transition:3s ease-in;-moz-transition:3s ease-in;-o-transition:3s ease-in;transition:3s ease-in;}div.rocket div{width:92px;height:215px;background:url('http://www.the-art-of-web.com/images/rocket.gif') no-repeat;-webkit-transition:2s ease-in-out;-moz-transition:2s ease-in-out;-o-transition:2s ease-in-out;transition:2s ease-in-out;}#outerspace:hover div.rocket{-webkit-transform:translate(0px,-5400px);-moz-transform:translate(0px,-5400px);-o-transform:translate(0px,-5400px);-ms-transform:translate(0px,-5400px);transform:translate(0px,-5400px);}</style> 

Thank you in advance

Answer 1

This is because of the first thing in your CSS where you said for #outerspace :

 background: #0c0440 url('http://www.the-art-of-web.com/images/rocket.gif'); 

The url part should not be there at all. If you wrote no-repeat , there will still be 1 rocket, which should not be, therefore, to summarize:

Take out the url('http://www.the-art-of-web.com/images/rocket.gif') from the background of #outerspace .

The code should be:

 background: #0c0440; 

Here is your reassurance:

 #outerspace{position:relative;height:400px;background:#0c0440;color:#fff;}div.rocket{position:absolute;bottom:10px;left:20px;-webkit-transition:3s ease-in;-moz-transition:3s ease-in;-o-transition:3s ease-in;transition:3s ease-in;}div.rocket div{width:92px;height:215px;background:url('http://www.the-art-of-web.com/images/rocket.gif') no-repeat;-webkit-transition:2s ease-in-out;-moz-transition:2s ease-in-out;-o-transition:2s ease-in-out;transition:2s ease-in-out;}#outerspace:hover div.rocket{-webkit-transform:translate(0px,-5400px);-moz-transform:translate(0px,-5400px);-o-transform:translate(0px,-5400px);-ms-transform:translate(0px,-5400px);transform:translate(0px,-5400px);} 

 <div id="outerspace"> <div class="rocket"> <div></div> BoneOS </div>#outerspace </div>