This is my first question and I'm so happy for this
I created a page with fullpage.js Roadmap
I would create an animation with CSS3, so I saw an easy tutorial
I followed instructions and I pasted code to roadmap.html Animation works well, but I don't know why there are 14 rockets with blue brackground. You can see "glitch" Here
Any error with js ? Is it 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>
Thanks in advance
CSS animations work on most modern mobile and desktop browsers. However, your animations may not work if you're using an older browser or a version of your browser that hasn't been updated in several years, simply due to lack of browser support.
CSS animations make a website visually attractive and enhance the user experience. We hope you can get inspiration from these 30 top cool CSS animation examples to make a wonderful animation website.
Compared with animating elements using JavaScript, CSS animations can be easier to create. They can also give better performance, as they give the browser more control over when to render frames, and to drop frames if necessary.
CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: @keyframes. animation-name.
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 would still be 1 rocket that shouldn't be there, so to sum it up:
Take out 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With