Solar System Planet Rotation Animation CSS3 by Muthujoo
---------------------------------------------- DEMO -----------------------------------------------------
---------------------------------------------- CSS3 -----------------------------------------------------
body { background:#000; }
.circle { position:absolute; width:300px; height:300px; top:100px; left:100px; }
.dot { position:absolute; width:50px; height:50px; top:80px; left:80px; }
.center { width:480px; height:480px; position:absolute; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;
-webkit-animation-name:orbit; -webkit-animation-duration:15s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear;
-moz-animation-name:orbit; -moz-animation-duration:15s; }
@-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-moz-keyframes orbit { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
.img { border-radius:999px; animation:circle 20s linear infinite; -webkit-animation:circle 20s linear infinite; }
@keyframes circle { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }
@-webkit-keyframes circle { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }
.img1 { border-radius:999px; animation:circle 2s linear infinite; -webkit-animation:circle 2s linear infinite; transition:transform 2s; -webkit-transition:transform 2s; }
@keyframes circle { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);} }
@-webkit-keyframes circle { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);} }
@keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-moz-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-webkit-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
50% { } 100% { background-position:500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9; } }
@-ms-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
body { background-image:url('snowh.png'), url('snow3q.png'), url('snow2l.png');
-webkit-animation:snow 20s linear infinite; -moz-animation:snow 20s linear infinite; -ms-animation:snow 20s linear infinite; animation:snow 20s linear infinite; }
#container { margin:0px auto; text-align:center; color:white; font:bold 28px 'Spirax', cursive; text-shadow:0px 0px 4px rgba(0,0,0, 0.5); height:600px; }
h4 { position:absolute; z-index:1000; bottom:-20px; text-align:center; width:100%; }
---------------------------------------------- HTML5 ----------------------------------------------------
<div id="container">
<h4>Solar System Planet Rotation Animation CSS3 <br> by Muthujoo</h4>
<div class="circle"><img src="earth.png" class="img"></div>
<div class="center">
<div class="dot"><img src="moon.png" class="img1"></div>
</div>
<div style=" position:absolute; margin-top:400px;"><img src="p1.png" class="img1"></div>
</div>
---------------------------------------------- IMAGES ---------------------------------------------------
