Skip to content

Instantly share code, notes, and snippets.

@abhishekmunie

abhishekmunie/index.html

Created January 14, 2012 08:09
Show Gist options
  • Save abhishekmunie/1610707 to your computer and use it in GitHub Desktop.
Save abhishekmunie/1610707 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Sky Background - sky animated by changing background position of 3 div element using CSS3 animations
Raw
index.html
<!doctype html>
<html class="animations-on">
<link href="main000.css" rel="stylesheet" type="text/css"/>
<div id="sky_background" class="sky_back"></div><div id="sky_midground" class="sky_back"></div><div id="sky_foreground" class="sky_back"></div>
</html>
Raw
main000.css
@keyframes moving-star-background {
from {background-position:0 0;}
to {background-position:10000px 2000px;}
}
@-webkit-keyframes moving-star-background {
from {background-position:0 0;}
to {background-position:10000px 2000px;}
}
@-moz-keyframes moving-star-background {
from {background-position:0 0;}
to {background-position:10000px 2000px;}
}
@-ms-keyframes moving-star-background {
from {background-position:0 0;}
to {background-position:10000px 2000px;}
}
@keyframes moving-star-background-rev {
from {background-position:0 0;}
to {background-position:-10000px -2000px;}
}
@-webkit-keyframes moving-star-background-rev {
from {background-position:0 0;}
to {background-position:-10000px -2000px;}
}
@-moz-keyframes moving-star-background-rev {
from {background-position:0 0;}
to {background-position:-10000px -2000px;}
}
@-ms-keyframes moving-star-background-rev {
from {background-position: 0;}
to {background-position:-10000px -2000px;}
}
.sky_back{
position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;
animation-timing-function:linear;
animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-ms-animation-iteration-count:infinite;
}
#sky_background{
background:url(images/stars_background.png) repeat 5% 5%;z-index:0;
}.animations-on #sky_background{
animation-name:moving-star-background-rev;
animation-duration:240s;
-webkit-animation-name:moving-star-background-rev;
-webkit-animation-duration:240s;
-moz-animation-name:moving-star-background-rev;
-moz-animation-duration:240s;
-ms-animation-name:moving-star-background-rev;
-ms-animation-duration:240s;
}
#sky_midground{
background:url(images/stars_midground.png) repeat 20% 20%;z-index:1;
}.animations-on #sky_midground{
animation-name:moving-star-background;
animation-duration:480s;
-webkit-animation-name:moving-star-background;
-webkit-animation-duration:480s;
-moz-animation-name:moving-star-background;
-moz-animation-duration:480s;
-ms-animation-name:moving-star-background;
-ms-animation-duration:480s;
}
#sky_foreground{
background:url(images/stars_foreground.png) repeat 90% 110%;z-index:2;
}.animations-on #sky_foreground{
animation-name:moving-star-background;
animation-duration:150s;
-webkit-animation-name:moving-star-background;
-webkit-animation-duration:150s;
-moz-animation-name:moving-star-background;
-moz-animation-duration:150s;
-ms-animation-name:moving-star-background;
-ms-animation-duration:150s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment