Moving Clouds CSS3

by muthu[ Edit ] 2013-12-30 12:51:35

Moving Clouds CSS3
----------------------------------------------- DEMO -------------------------------------------------

----------------------------------------------- CSS3 -------------------------------------------------

body { background:#000; padding:0; overflow:hidden; height:600px; margin:0; }
.container { width:800px; position:relative; height:600px; overflow:hidden; margin:0 auto; background:url(bg3.jpg) no-repeat; }
#clouds { top:100px; position:relative; -webkit-animation:move 40s infinite linear; -moz-animation:move 40s infinite linear; -ms-animation:move 40s infinite linear; z-index:1; }
#clouds2 { position:relative; -webkit-animation:backup 30s infinite linear; -moz-animation:backup 30s infinite linear; -ms-animation:backup 30s infinite linear; z-index:2; }
.cloud1 { width:200px; height:113px; background:url(4.png) no-repeat; position:absolute; top:10px; }
.cloud1:after { content:''; position:absolute; background:url(4.png) no-repeat; top:-40px; left:20px; }
.cloud1:before { content:''; position:absolute; background:url(4.png) no-repeat; top:-60px; right:30px; }
.cloud2 { width:200px; height:109px; background:url(5.png) no-repeat; position:absolute; top:100px; left:400px; }
.cloud2:after { content:''; position:absolute; background:url(5.png) no-repeat; top:-20px; left:10px; }
.cloud2:before { content:''; position:absolute; background:url(5.png) no-repeat; top:-30px; right:15px; }
.cloud3 { width:`00px; height:55px; background:url(6.png) no-repeat; position:absolute; top:60px; left:740px; }
.cloud3:after { content:''; position:absolute; background:url(6.png) no-repeat; top:-40px; left:20px; }
.cloud3:before { content:''; position:absolute; background:url(6.png) no-repeat; top:-60px; right:30px; }
@-webkit-keyframes move { 0% {left:0px;} 49% {left:940px; opacity:1;} 50% {left:940px; opacity:0;} 51% {left:-940px; opacity:0;} 52% {left:-940px; opacity:1;} 100% {left:0px;} }
@-webkit-keyframes backup { 0% {left:-940px;} 100% {left:940px;} }
@-moz-keyframes move { 0% {left:0px;} 49% {left:940px; opacity:1;} 50% {left:940px; opacity:0;} 51% {left:-940px; opacity:0;} 52% {left:-940px; opacity:1;} 100% {left:0px;} }
@-moz-keyframes backup { 0% {left:-940px;} 100% {left:940px;} }
@-ms-keyframes move { 0% {left:0px;} 49% {left:940px; opacity:1;} 50% {left:940px; opacity:0;} 51% {left:-940px; opacity:0;} 52% {left:-940px; opacity:1;} 100% {left:0px;} }
@-ms-keyframes backup { 0% {left:-940px;} 100% {left:940px;} }
#background { background:url('foreground.png') 5% 5%, url('midground.png') 50% 50%; top:90px; left:0; right:0; bottom:0; position:fixed;
-webkit-transition:left 300s linear; -moz-transition:left 300s linear; -o-transition:left 300s linear; -ms-transition:left 300s linear; transition:left 300s linear; }
#experiment:target #background { left:-5000px; }
#experiment:hover #background { left:-9999px; }

----------------------------------------------- HTML5 -------------------------------------------------