{"id":53,"date":"2018-02-18T18:33:19","date_gmt":"2018-02-18T18:33:19","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=53"},"modified":"2018-11-06T14:50:48","modified_gmt":"2018-11-06T14:50:48","slug":"css-airplane-plus","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-airplane-plus\/","title":{"rendered":"Airplane Plus CSS Animation"},"content":{"rendered":"<style>\n\/*  ================= Animation Start  ====================  *\/\n.ani-box {background-color: #7195FF;}\n#prop {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tz-index: 3;\n\tanimation: spin 30s linear infinite;\n\tpadding: 0;\n}\n#plane {\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: -100px;\n\tmargin-left: -250px;\n\tpadding: 0;\n        margin:0;\n}\n@keyframes spin  {\n\t0%   {transform: rotate(-144000deg);}\n\t100% {transform: rotate(144000deg);}\n}\n.fly  {\n\tposition: absolute;\n\ttop: 80%;\n\tleft: 50%;\n\tz-index:3;\n\twidth: 20%;\n\tfloat: left;\n\tanimation: fly 30s linear infinite;\n}\n@keyframes fly {\n\t0%   {left:80%; top:-20%; transform:scale(0.5);}\n\t25%  {left:30%; top:40%;}\n\t50%  {left:60%; top:60%;}\n\t75%  {left:30%; top:80%;}\n\t100% {left:50%; top:130%; transform:scale(2.1);}\n}\n#clouds1 {\n\tposition: absolute;\n\tbackground: url(http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-plus\/cloudf.png) repeat-x;\n\ttop: 150px;\n\tleft: -9000px;\n\tbottom: 0;\n\tright: 0;\n\theight: 400px;\n\tz-index: 1;\n\tanimation: cloud1 300s linear infinite;\n}\n@keyframes cloud1 {\n\t0%   {left:-9000px;}\n\t100% {left: 9000px;}\n}\n#clouds2 {\n\tposition: absolute;\n\ttop: -20px;\n\tleft: -9800px;\n\tbottom: 0;\n\tright: 0;\n\tbackground: url(http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/2017\/css-img\/airplane-plus\/cloudb.png) repeat-x 0 0;\n\theight: 400px;\n\tz-index: 1;\n\tanimation: cloud2 400s linear infinite;\n}\n@keyframes cloud2 {\n\t0%   {left:-9000px;}\n\t100% {left: 9000px;}\n}\n#snoopy {\n\tposition: absolute;\n\ttop: 100px;\n\tleft: -400px;\n\tz-index: 2;\n\tanimation: snoopy 30s linear infinite;\n}\n@keyframes snoopy {\n\t0%  {left: -600px; top:1200px; transform:scale(2);}\n\t60% {left: -600px; top:1200px; transform:scale(2);}\n\t90% {left: 1500px; top:-300px; transform:scale(0.2);}\n\t100%{left: 1500px; top:-300px; transform:scale(0.2);}\n}\n#gamera {\n\tposition: absolute;\n\ttop: 100px;\n\tleft: -400px;\n\tz-index: 2;\n\tanimation: gamera 30s linear infinite;\n\tanimation-delay:5s;\n}\n@keyframes gamera {\n\t0%  {left: -600px; top:200px; transform:scale(1);}\n\t70% {left: -600px; top:200px; transform:scale(1);}\n\t90% {left: 2500px; top:600px; transform:scale(2);}\n\t100%{left: 2500px; top:600px; transform:scale(0.2);}\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-plus\/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-plus\/plane.png\" alt=\"BiPlane\" width=\"500\" height=\"200\"\/>\n  <\/div>\n<div id=\"sky\">\n<div id=\"clouds1\"><\/div>\n<div id=\"clouds2\"><\/div>\n<\/p><\/div>\n<p>  <img loading=\"lazy\" decoding=\"async\" id=\"snoopy\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-plus\/snoopy.png\" alt=\"Snoopy\" width=\"184\" height=\"200\" \/><br \/>\n  <img loading=\"lazy\" decoding=\"async\" id=\"gamera\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-plus\/gamera.png\" alt=\"Gamera\" width=\"250\" height=\"159\" \/><\/p>\n<\/div>\n<p> <!-- ani-box --><\/p>\n<p class=\"below-ani\">\nOkay this one is a little tacky. Similar to the airplane CSS animation, but with moving clouds &#8211; a very basic animation which uses a few images.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Okay this one is a little tacky. Similar to the airplane CSS animation, but with moving clouds &#8211; a very basic animation which uses a few images.<\/p>\n","protected":false},"author":2,"featured_media":2569,"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\/53"}],"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=53"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":2657,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/53\/revisions\/2657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2569"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}