CSS3 Cloud Animations

Nicholas23 · 11-29-2012, 07:11 PM

Hey Guys,

looking for a bit of help, im trying to learn css3 animations, just basics but everything i try doesnt seem to work as it says it does.

basically i made a really long page

*{ margin: 0; padding: 0;}

body {
overflow: visible;
height:3840px;
}

I then added a image called cloud.

but how using only CSS3 do you animate the cloud to move across the screen infinitely?

Thanks for the help.

coothead · 11-29-2012, 10:46 PM

Hi there Nicholas23,

You will probably have to wait for IE10 for "CSS3 animation" support.

Source:-

http://caniuse.com/#search=animation

You can download a simple example of continuous animation here...

http://ubuntuone.com/2SJRLzIrFlNLO8JaAo8BYY

...although Opera, unfortunately at present, does not seem to render "infinite".

coothead

Nicholas23 · 11-30-2012, 01:41 PM

hey thanks,

yeah im aware its got limited support, im just doing this for my own learning on firefox so im alright. this is what i worked out so far.

HTML:

<body>
<div class="cloud1"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>
<div class="cloud2"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>
<div class="cloud3"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>
<div class="cloud4"><img src="img/cloud.png" width="300" height="150" alt="cloud"></div>

<div class="fish1"><img src="img/fish1.png" width="200" height="120" alt="fish"></div>
<div class="fish2"><img src="img/fish2.png" width="200" height="120" alt="fish"></div>
<div class="fish3"><img src="img/fish3.png" width="200" height="120" alt="fish"></div>
<div class="fish4"><img src="img/fish4.png" width="200" height="120" alt="fish"></div>

<h1 align="center" style="margin-top:200px;">WELCOME TO SPACE...coming soon, scroll down.</h1>
<h1 align="center" style="margin-top:1350px;">THERES GONNA BE CLOUDS HERE</h1>
<h1 align="center" style="margin-top:2800px;">WATERS PRETTY DEEP HERE</h1>
</body>

CSS:

.cloud1{
position:absolute;
top:1750px;
left:-500px;
animation:20s linear infinite cloud;
}
[theres more cloud classes but not adding for simplicity of reading]

.fish1{
position:absolute;
top:4000px;
right:-500px;
animation:19s linear infinite fishleft;
}
.fish2{
position:absolute;
top:3700px;
left:-500px;
animation:15s linear infinite fishright;
}

KEYFRAMES:

@keyframes fishleft{
from{right:100%}
to{right:-20%}
}
@-moz-keyframes fishleft{
from{right:100%}
to{right:-20%}
}
@keyframes fishright{
from{left:100%}
to{left:-20%}
}
@-moz-keyframes fishright{
from{left:100%}
to{left:-20%}
}

@keyframes cloud{
from{left:100%}
to{left:0%}
}
@-moz-keyframes cloud{
from{left:100%}
to{0%}
}

RESULT:

http://silverreign.co.za

so i have a further question. since im happy enough with the basics, ill do something more with it over time.

but having a scrollbar is ugly, so ideally i would want to set the overflow to hidden.

however i would need a button that then would scroll down the page, how do i go about creating that?

Thanks