{"id":90,"date":"2018-02-18T20:05:46","date_gmt":"2018-02-18T20:05:46","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=90"},"modified":"2025-02-13T21:10:00","modified_gmt":"2025-02-13T21:10:00","slug":"css-earth","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-earth\/","title":{"rendered":"Earth Moon Orbit CSS Animation"},"content":{"rendered":"<style>\n.ani-box {position: relative; height: 600px; width: 100%; border-top: solid 1px #000;  border-bottom: solid 1px #000; background-color: transparent; overflow: hidden;}\n#orbit {\n\tposition: relative;\n\twidth: 100%;\n\theight: 600px;\n\tmargin: 0 auto;\n        overflow: hidden;\n        background-color: transparent;\n box-sizing: content-box;\n}\n#clouds, #earth {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: -9800px;\n\tright: 0;\n\theight: 410px;\n        margin-top: -205px;\n\tz-index: 5;\n box-sizing: content-box;\n}\n#clouds {\n\tbackground: url(http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/earth\/clouds5b.png) repeat-x 0 0;\n\tanimation: cloud1 500s linear infinite;\n        animation-delay: -20s;\n}\n#earth {\n        background: url(http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/earth\/earth5.jpg) repeat-x 0 0;\n\tanimation: cloud1 2000s linear infinite;\n}\n@keyframes cloud1 {\n\t0%   {left:-9000px;}\n\t100% {left: 9000px;}\n}\n.planet-box {width: 100%; height: 100%; position: absolute; left:0;  top:0;}\n#planet {\n\tpadding: 0px;\n\tmargin-left: -760px;\n        margin-top: -300px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n        width: 1520px; \n        height: 600px; \n        min-width: 1520px;\n        z-index: 15;\n box-sizing: content-box;\n}\n#moon {\n\tposition: absolute;\n\ttop: 10px;\n\tmargin-left: -68px;\n\tz-index: 100;\n\tanimation: moon 60s linear infinite;\n box-sizing: content-box;\n}\n@keyframes moon {\n\t0%   {transform: scale(0.3,0.3); left:50%;}\n\t12.5%{transform: scale(0.7,0.7); left:20%;}\n\t25%  {transform: scale(1.1,1.1); left:10%;}\n\t37.5%{transform: scale(1.5,1.5); left:20%;}\n\t50%  {transform: scale(2.0,2.0); left:50%; top: 600px;}\n\t62.5%{transform: scale(1.5,1.5); left:80%;}\n\t75%  {transform: scale(1.1,1.1); left:90%;}\n\t87.5%{transform: scale(0.7,0.7); left:75%;}\n\t100% {transform: scale(0.3,0.3); left:50%;}\n}\n<\/style>\n<div class=\"ani-box\">\n<p>  <img decoding=\"async\" id=\"planet\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/earth\/stars.png\" alt=\"stars\"\/>\t<\/p>\n<div id=\"orbit\">\n<div id=\"earth\"><\/div>\n<div id=\"clouds\"><\/div>\n<\/p><\/div>\n<p>  <img loading=\"lazy\" decoding=\"async\" id=\"moon\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/earth\/moon.png\" alt=\"moon\" width=\"136\" height=\"136\"\/><\/p>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":2581,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,17,16],"class_list":["post-90","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-earth","tag-pure-css"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":3824,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/90\/revisions\/3824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2581"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}