{"id":41,"date":"2018-02-18T18:29:07","date_gmt":"2018-02-18T18:29:07","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=41"},"modified":"2018-11-06T14:48:13","modified_gmt":"2018-11-06T14:48:13","slug":"css-airplane-banner","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-airplane-banner\/","title":{"rendered":"Airplane Banner CSS Animation"},"content":{"rendered":"<style>\n\/*  ================= Animation Start  ====================  *\/\n.ani-box {background-color: #7195FF;}\n\/*Secondary Blue Background Start*\/\n.ab-bg {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0px;\n\tleft: 0px;\n\topacity: 0;\n\tz-index: 2;\n\tbackground-color: #000099;\n\tanimation: bg 30s linear infinite;\n}\n@keyframes bg  {\n\t0%  {opacity: 0;}\n\t80% {opacity: 0;}\n\t85% {opacity: 1;}\n\t100%{opacity: 1;}\n}\n\/*Secondary Blue Background END*\/\n\/*Flying Page Start*\/\n.ab-content {\n\tborder: 3px solid #000000;\n\tpadding: 20px 0 60px 0;\n\twidth: 880px;\n\tcolor: #000099;\n\tbackground-color: #E6E6E6;\n\tmargin-top: -200px;\n\tmargin-left: 170px;\n\theight: 400px;\n\tposition: absolute;\n\tz-index: 99999;\n}\n@keyframes content  {\n\t0%  {transform:scale(0.5); }\n\t50% {transform:scale(0.85); z-index: 99999;}\n\t100%{transform:scale(0.85); z-index: 99999;}\n}\n.cont-text p {\n\tmargin: 0px auto 0px auto;\n\tpadding: 10px 15px 0px 12px;\n\tcolor: #000099;\n\tfont-size: 1.5em;\n\ttext-align: center;\n\twidth: 85%;\n}\n.cont-text img {\n\tborder: 0.5em solid #666666;\n\tmargin: 1em auto;\n\ttext-align: center;\n\twidth: auto;\n\tposition: relative;\n\theight: 85%;\n}\n.cont-text img:hover {\n\tborder-color: #FF0000;\n}\n\/*Flying Page End*\/\n#plane {\n\tposition: absolute;\n\tz-index: 3;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -120px;\n\tmargin-left: -150px;\n\tanimation: fly 30s linear infinite;\n}\n@keyframes fly {\n0%  {left:80%; top:0%; transform:scale(0.7);}\n20% {left:50%; top:20%;}\n40% {left:50%; top:50%;}\n60% {left:30%; top:70%;}\n80% {left:-10%;top:55%; transform:scale(1.5);}\n100%{left:-50%;top:55%; transform:scale(0.5); }\n}\n#rope {\n\tposition: absolute;\n\twidth: 700px;\n\theight: 1px;\n\tbackground-color: #C0C0C0;\n\tleft: 280px;\n\ttop: 115px;\n\tz-index: 1;\n\tanimation: rope 30s linear infinite;\n}\n@keyframes rope {\n\t0%  {opacity: 0;}\n\t100%{opacity: 1;}\n}\n.banner {\n\tposition: absolute;\n\tmargin-left: 717px;\n\ttop: 50%;\n\tleft: 50%; \n\tmargin-top: -200px;\n\tz-index: 3;\n\tanimation: fly2 30s linear infinite;\nwidth: 1195px;\nheight: 600px;\n}\n@keyframes fly2 {\n\t0%  {left:60%; top:0%; transform:scale(0.1);}\n\t20% {left:40%; top:20%;}\n\t40% {left:80%; top:50%;}\n\t60% {left:70%; top:70%;}\n\t80% {left:50%; top:50%;  margin-left: -598px; margin-top: 0px; transform:scale(1.0);}\n\t100%{left:50%; top:50%;  margin-left: -598px; margin-top: 0px; transform:scale(1.0);}\n}\n#red {\t\/* Used to Fade out Red banner*\/\n\tz-index: 1;\n\tmargin-top: -250px;\n\tposition: absolute;\n\tanimation: red 30s linear infinite;\n}\n@keyframes red {\n\t0%  {opacity: 1;}\n\t90% {opacity: 1;}\n\t92% {opacity: 0;}\n\t100%{opacity: 0;}\n}\n\/* Clouds Start *\/\n#clouds1 {\n\tposition: absolute;\n\tbackground: url(http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-banner\/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\/css-img\/airplane-banner\/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<\/style>\n<div class=\"ani-box\">\n<div class=\"ab-bg\"><\/div>\n<div id=\"plane\">\n<div>\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-banner\/plane.png\" alt=\"Plane\" width=\"300\" height=\"204\"\/>\n\t\t\t\t<\/div>\n<div id=\"rope\"><\/div>\n<\/p><\/div>\n<div class=\"banner\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" id=\"red\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-banner\/banner.png\" alt=\"Banner\" width=\"1195\" height=\"600\"\/><\/p>\n<div class=\"ab-content\">\n<div class=\"cont-text\">\n<p>\n\t\t\t\t\t\t\tThis animation can be used to fly in a webpage or an advertisement.<br \/>\n\t\t\t\t\t\t\t<a target=\"_blank\" href=\"http:\/\/www.amazon.com\/gp\/product\/B00GDQ0RMG\/ref=as_li_tl?ie=UTF8&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B00GDQ0RMG&#038;linkCode=as2&#038;tag=thingographyc-20&#038;linkId=TUGVZGKQMVTUJSO7\"><img decoding=\"async\" class=\"tooltip\" title=\"This image is clickable - Click for more info on TV Sticks\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/airplane-banner\/afs.jpg\" alt=\"Fire TV Stick\"\/><\/a><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/ir-na.amazon-adsystem.com\/e\/ir?t=thingographyc-20&#038;l=as2&#038;o=1&#038;a=B00GDQ0RMG\" width=\"1\" height=\"1\" border=\"0\" alt=\"\" style=\"border:none !important; margin:0px !important;\" \/>\n\t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<p> <!--Close con-text--><\/p><\/div>\n<p> <!--Close Content-->\n\t\t\t<\/div>\n<p> <!--Close Banner--><\/p>\n<div id=\"sky\">\n<div id=\"clouds1\"><\/div>\n<div id=\"clouds2\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- .ani-box -->\t<\/p>\n<p class=\"below-ani\">\nThis CSS animation is best viewed in a big screen or desktop computer. Many of these CSS animations are years old and created before &#8220;responsive&#8221; web pages and mobile devices were dominant. A few images are used with CSS to create the Airplane banner animation. Inspired by my beach days of watching the airplane banners fly by throughout the days.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This animation can be used to fly in a webpage or an advertisement. This CSS animation is best viewed in a big screen or desktop computer. Many of these CSS animations are years old and created before &#8220;responsive&#8221; web pages<\/p>\n","protected":false},"author":2,"featured_media":2568,"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\/41"}],"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=41"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":2658,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/41\/revisions\/2658"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2568"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}