Created
November 20, 2012 20:19
-
-
Save ursuleacv/4120769 to your computer and use it in GitHub Desktop.
A CodePen by mutukrish. earth and moon animation using css3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="moon_holder"> | |
| <div id="moon_back"></div> | |
| <img src="http://lab.legomushroom.com/___img/moon2.png" id="moon"> | |
| <div id="moon_ball"></div> | |
| </div> | |
| <div id="center" align="center"> | |
| <div id="earth_holder"> | |
| <div id="earth_ball"></div> | |
| <div id="earth_glow"></div> | |
| <div id="earth"></div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes "rotate_earth" { | |
| 0% { | |
| background-position: 0px -2px; | |
| } | |
| 50% { | |
| background-position: 205px -2px; | |
| } | |
| 100% { | |
| background-position: 410px -2px; | |
| } | |
| } | |
| @-moz-keyframes rotate_earth { | |
| 0% { | |
| background-position: 0px -2px; | |
| } | |
| 50% { | |
| background-position: 205px -2px; | |
| } | |
| 100% { | |
| background-position: 410px -2px; | |
| } | |
| } | |
| @-webkit-keyframes "rotate_earth" { | |
| 0% { | |
| background-position: 0px -2px; | |
| } | |
| 50% { | |
| background-position: 205px -2px; | |
| } | |
| 100% { | |
| background-position: 410px -2px; | |
| } | |
| } | |
| @-ms-keyframes "rotate_earth" { | |
| 0% { | |
| background-position: 0px -2px; | |
| } | |
| 50% { | |
| background-position: 205px -2px; | |
| } | |
| 100% { | |
| background-position: 410px -2px; | |
| } | |
| } | |
| @-o-keyframes "rotate_earth" { | |
| 0% { | |
| background-position: 0px -2px; | |
| } | |
| 50% { | |
| background-position: 205px -2px; | |
| } | |
| 100% { | |
| background-position: 410px -2px; | |
| } | |
| } | |
| body { | |
| background: #fff url("http://lab.legomushroom.com/___img/sky_star2.jpg") 0px 0px; | |
| -ms-overflow-x: hidden; | |
| overflow-x: hidden; | |
| margin: 0; | |
| -webkit-animation: sky 80s linear infinite; | |
| -moz-animation: sky 80s linear infinite; | |
| -ms-animation: sky 80s linear infinite; | |
| -o-animation: sky 80s linear infinite; | |
| animation: sky 80s linear infinite; | |
| } | |
| body div#moon_holder { | |
| position: absolute; | |
| left: -30%; | |
| bottom: 60px; | |
| z-index: 6; | |
| -webkit-animation: launch_moon 240s linear infinite; | |
| -moz-animation: launch_moon 240s linear infinite; | |
| -ms-animation: launch_moon 240s linear infinite; | |
| -o-animation: launch_moon 240s linear infinite; | |
| animation: launch_moon 240s linear infinite; | |
| } | |
| body div#moon_holder img#moon { | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 90px; | |
| position: absolute; | |
| z-index: 0; | |
| -webkit-animation: launch_moon_size 60s linear infinite; | |
| -moz-animation: launch_moon_size 60s linear infinite; | |
| -ms-animation: launch_moon_size 60s linear infinite; | |
| -o-animation: launch_moon_size 60s linear infinite; | |
| animation: launch_moon_size 60s linear infinite; | |
| -webkit-box-shadow: -400px -30px 20px rgba(0,0,0,0.50); | |
| box-shadow: -400px -30px 20px rgba(0,0,0,0.50); | |
| } | |
| body div#moon_holder div#moon_ball { | |
| z-index: 1; | |
| position: absolute; | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 90px; | |
| margin: 1px 1px 0px 0px; | |
| -webkit-box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000; | |
| -moz-box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000; | |
| box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000; | |
| -webkit-animation: launch_moon_ball_size 240s linear infinite; | |
| -moz-animation: launch_moon_ball_size 240s linear infinite; | |
| -ms-animation: launch_moon_ball_size 240s linear infinite; | |
| -o-animation: launch_moon_ball_size 240s linear infinite; | |
| animation: launch_moon_ball_size 240s linear infinite; | |
| } | |
| body div#moon_holder div#moon_back { | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 90px; | |
| position: absolute; | |
| z-index: 0; | |
| background-color: #000; | |
| -webkit-animation: launch_moon_ball_size 240s linear infinite; | |
| -moz-animation: launch_moon_ball_size 240s linear infinite; | |
| -ms-animation: launch_moon_ball_size 240s linear infinite; | |
| -o-animation: launch_moon_ball_size 240s linear infinite; | |
| animation: launch_moon_ball_size 240s linear infinite; | |
| } | |
| body div#earth_holder { | |
| position: static; | |
| z-index: 1; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 200px; | |
| margin-top: 11%; | |
| } | |
| body div#earth_holder div#earth { | |
| z-index: 2; | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 200px; | |
| background: url("http://lab.legomushroom.com/___img/11.jpg") 0px 0px; | |
| -webkit-transform: rotate(20deg); | |
| -moz-transform: rotate(20deg); | |
| -o-transform: rotate(20deg); | |
| -ms-transform: rotate(20deg); | |
| transform: rotate(20deg); | |
| -moz-box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50); | |
| -webkit-box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50); | |
| box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50); | |
| -webkit-animation: rotate_earth 40s linear infinite; | |
| -moz-animation: rotate_earth 40s linear infinite; | |
| -ms-animation: rotate_earth 40s linear infinite; | |
| -o-animation: rotate_earth 40s linear infinite; | |
| animation: rotate_earth 40s linear infinite; | |
| } | |
| body div#earth_holder div#earth_glow { | |
| z-index: 4; | |
| -webkit-box-shadow: 0 0px 19px rgba(79,156,201,0.80); | |
| box-shadow: 0 0px 19px rgba(79,156,201,0.80); | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 200px; | |
| } | |
| body div#earth_holder div#earth_ball { | |
| z-index: 3; | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 200px; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=74)"; | |
| filter: alpha(opacity=74); | |
| opacity: 0.74; | |
| -webkit-box-shadow: inset 40px -40px 80px #000, inset 20px -20px 100px #000; | |
| box-shadow: inset 40px -40px 80px #000, inset 20px -20px 100px #000; | |
| } | |
| @keyframes "launch_moon" { | |
| 25% { | |
| z-index: 6; | |
| } | |
| 50% { | |
| left: 140%; | |
| bottom: 600px; | |
| z-index: 0; | |
| } | |
| 55% { | |
| bottom: 680px; | |
| } | |
| 75% { | |
| z-index: 0; | |
| } | |
| 100% { | |
| left: -30%; | |
| z-index: 6; | |
| bottom: 100px; | |
| } | |
| } | |
| @-moz-keyframes launch_moon { | |
| 25% { | |
| z-index:6; | |
| } | |
| 50% { | |
| left: 140%; | |
| bottom: 600px; | |
| z-index: 0; | |
| } | |
| 55% { | |
| bottom: 680px; | |
| } | |
| 75% { | |
| z-index: 0; | |
| } | |
| 100% { | |
| left: -30%; | |
| z-index: 6; | |
| bottom: 100px; | |
| } | |
| } | |
| @-webkit-keyframes "launch_moon" { | |
| 25% { | |
| z-index: 6; | |
| } | |
| 50% { | |
| left: 140%; | |
| bottom: 600px; | |
| z-index: 0; | |
| } | |
| 55% { | |
| bottom: 680px; | |
| } | |
| 75% { | |
| z-index: 0; | |
| } | |
| 100% { | |
| left: -30%; | |
| z-index: 6; | |
| bottom: 100px; | |
| } | |
| } | |
| @-ms-keyframes "launch_moon" { | |
| 25% { | |
| z-index: 6; | |
| } | |
| 50% { | |
| left: 140%; | |
| bottom: 600px; | |
| z-index: 0; | |
| } | |
| 55% { | |
| bottom: 680px; | |
| } | |
| 75% { | |
| z-index: 0; | |
| } | |
| 100% { | |
| left: -30%; | |
| z-index: 6; | |
| bottom: 100px; | |
| } | |
| } | |
| @-o-keyframes "launch_moon" { | |
| 25% { | |
| z-index: 6; | |
| } | |
| 50% { | |
| left: 140%; | |
| bottom: 600px; | |
| z-index: 0; | |
| } | |
| 55% { | |
| bottom: 680px; | |
| } | |
| 75% { | |
| z-index: 0; | |
| } | |
| 100% { | |
| left: -30%; | |
| z-index: 6; | |
| bottom: 100px; | |
| } | |
| } | |
| @keyframes "launch_moon_size" { | |
| 0% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -webkit-transform: scale(1.2, 1.2); | |
| -moz-transform: scale(1.2, 1.2); | |
| -o-transform: scale(1.2, 1.2); | |
| -ms-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 55% { | |
| -webkit-transform: scale(0.8, 0.8); | |
| -moz-transform: scale(0.8, 0.8); | |
| -o-transform: scale(0.8, 0.8); | |
| -ms-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| 75% { | |
| -webkit-transform: scale(0.7, 0.7); | |
| -moz-transform: scale(0.7, 0.7); | |
| -o-transform: scale(0.7, 0.7); | |
| -ms-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; | |
| filter: alpha(opacity=35); | |
| opacity: 0.35; | |
| } | |
| 100% { | |
| -webkit-transform: scale(0.9, 0.9); | |
| -moz-transform: scale(0.9, 0.9); | |
| -o-transform: scale(0.9, 0.9); | |
| -ms-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| } | |
| @-moz-keyframes launch_moon_size { | |
| 0% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -moz-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 55% { | |
| -moz-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| 75% { | |
| -moz-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| filter: alpha(opacity=35); | |
| opacity: 0.35; | |
| } | |
| 100% { | |
| -moz-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| } | |
| @-webkit-keyframes "launch_moon_size" { | |
| 0% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -webkit-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 55% { | |
| -webkit-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| 75% { | |
| -webkit-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| filter: alpha(opacity=35); | |
| opacity: 0.35; | |
| } | |
| 100% { | |
| -webkit-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| } | |
| @-ms-keyframes "launch_moon_size" { | |
| 0% { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -ms-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 55% { | |
| -ms-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| 75% { | |
| -ms-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; | |
| filter: alpha(opacity=35); | |
| opacity: 0.35; | |
| } | |
| 100% { | |
| -ms-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| } | |
| @-o-keyframes "launch_moon_size" { | |
| 0% { | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 50% { | |
| -o-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| filter: alpha(opacity=100); | |
| opacity: 1; | |
| } | |
| 55% { | |
| -o-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| 75% { | |
| -o-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| filter: alpha(opacity=35); | |
| opacity: 0.35; | |
| } | |
| 100% { | |
| -o-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| filter: alpha(opacity=70); | |
| opacity: 0.7; | |
| } | |
| } | |
| @keyframes "launch_moon_ball_size" { | |
| 50% { | |
| -webkit-transform: scale(1.2, 1.2); | |
| -moz-transform: scale(1.2, 1.2); | |
| -o-transform: scale(1.2, 1.2); | |
| -ms-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| } | |
| 55% { | |
| -webkit-transform: scale(0.8, 0.8); | |
| -moz-transform: scale(0.8, 0.8); | |
| -o-transform: scale(0.8, 0.8); | |
| -ms-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| } | |
| 75% { | |
| -webkit-transform: scale(0.7, 0.7); | |
| -moz-transform: scale(0.7, 0.7); | |
| -o-transform: scale(0.7, 0.7); | |
| -ms-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| } | |
| 100% { | |
| -webkit-transform: scale(0.9, 0.9); | |
| -moz-transform: scale(0.9, 0.9); | |
| -o-transform: scale(0.9, 0.9); | |
| -ms-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| } | |
| } | |
| @-moz-keyframes launch_moon_ball_size { | |
| 50% { | |
| -moz-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| } | |
| 55% { | |
| -moz-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| } | |
| 75% { | |
| -moz-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| } | |
| 100% { | |
| -moz-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| } | |
| } | |
| @-webkit-keyframes "launch_moon_ball_size" { | |
| 50% { | |
| -webkit-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| } | |
| 55% { | |
| -webkit-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| } | |
| 75% { | |
| -webkit-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| } | |
| 100% { | |
| -webkit-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| } | |
| } | |
| @-ms-keyframes "launch_moon_ball_size" { | |
| 50% { | |
| -ms-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| } | |
| 55% { | |
| -ms-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| } | |
| 75% { | |
| -ms-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| } | |
| 100% { | |
| -ms-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| } | |
| } | |
| @-o-keyframes "launch_moon_ball_size" { | |
| 50% { | |
| -o-transform: scale(1.2, 1.2); | |
| transform: scale(1.2, 1.2); | |
| } | |
| 55% { | |
| -o-transform: scale(0.8, 0.8); | |
| transform: scale(0.8, 0.8); | |
| } | |
| 75% { | |
| -o-transform: scale(0.7, 0.7); | |
| transform: scale(0.7, 0.7); | |
| } | |
| 100% { | |
| -o-transform: scale(0.9, 0.9); | |
| transform: scale(0.9, 0.9); | |
| } | |
| } | |
| @keyframes "sky" { | |
| 50% { | |
| background-position: 318px 212px; | |
| } | |
| 100% { | |
| background-position: 635px 423px; | |
| } | |
| } | |
| @-moz-keyframes sky { | |
| 50% { | |
| background-position: 318px 212px; | |
| } | |
| 100% { | |
| background-position: 635px 423px; | |
| } | |
| } | |
| @-webkit-keyframes "sky" { | |
| 50% { | |
| background-position: 318px 212px; | |
| } | |
| 100% { | |
| background-position: 635px 423px; | |
| } | |
| } | |
| @-ms-keyframes "sky" { | |
| 50% { | |
| background-position: 318px 212px; | |
| } | |
| 100% { | |
| background-position: 635px 423px; | |
| } | |
| } | |
| @-o-keyframes "sky" { | |
| 50% { | |
| background-position: 318px 212px; | |
| } | |
| 100% { | |
| background-position: 635px 423px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment