{"id":38,"date":"2018-02-18T18:19:51","date_gmt":"2018-02-18T18:19:51","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=38"},"modified":"2018-11-06T14:50:19","modified_gmt":"2018-11-06T14:50:19","slug":"css-airplane","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-airplane\/","title":{"rendered":"Airplane CSS Animation"},"content":{"rendered":"<style>\n\/*  ================= Animation Start  ====================  *\/\n.ani-box {\n  background-position: center center;background: url('http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane\/sky.jpg') no-repeat fixed center;\n  background-size: cover;\n}\n#prop {\nposition: absolute;\ntop: 50%;\nleft: 50%;\nz-index: 3;\nanimation: spin 30s linear infinite;\npadding: 0;\n}\n#plane {\ntop: 50%;\nleft: 50%;\nposition: absolute;\nmargin-top: -100px;\nmargin-left: -250px;\npadding: 0;\nmargin:0;\n}\n@keyframes spin  {\n0%   {transform: rotate(-144000deg);}\n100% {transform: rotate(144000deg);}\n}\n.fly  {\nmargin: 0px auto 0px auto;\nposition: relative;\nanimation: fly 30s linear infinite;\nwidth: 32%;\nfloat: left;\npadding: 0;\n}\n@keyframes fly {\n0%   {left:50%; top:25%; transform:scale(0.2);}\n25%  {left:20%; top:30%;}\n50%  {left:60%; top:20%;}\n75%  {left:15%; top:30%;}\n100% {left:50%; top:25%; transform:scale(1.5);}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"fly\">\n    <img loading=\"lazy\" decoding=\"async\"  id=\"prop\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane\/propeller.png\" alt=\"propeller\" width=\"500\" height=\"200\"\/><br \/>\n    <img loading=\"lazy\" decoding=\"async\" id=\"plane\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane\/plane.png\" alt=\"BiPlane\" width=\"500\" height=\"200\"\/>\n  <\/div>\n<\/div>\n<p class=\"below-ani\"> The airplane animation is a very basic and short CSS animation. The most difficult part was keep the spinning propeller stationary while the plane moves and the page is resized.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The airplane animation is a very basic and short CSS animation. The most difficult part was keep the spinning propeller stationary while the plane moves and the page is resized.<\/p>\n","protected":false},"author":2,"featured_media":2570,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[7,6,4,5],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/38"}],"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=38"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":2659,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/38\/revisions\/2659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2570"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}