{"id":75,"date":"2018-02-18T19:02:54","date_gmt":"2018-02-18T19:02:54","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=75"},"modified":"2018-11-06T14:41:41","modified_gmt":"2018-11-06T14:41:41","slug":"css-coffee","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-coffee\/","title":{"rendered":"Coffee Beans CSS Animation"},"content":{"rendered":"<style>\n.ani-box {position: relative; height: 600px; width: 100%;}\n#all {\nmargin-top: 0;\nwidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tposition: relative;\nbackground: rgb(191,159,102);\nbackground: -moz-linear-gradient(top, rgb(191,159,102) 0%, rgb(108,54,20) 100%);\nbackground: -webkit-linear-gradient(top, rgb(191,159,102) 0%,rgb(108,54,20) 100%);\nbackground: linear-gradient(to bottom, rgb(191,159,102) 0%,rgb(108,54,20) 100%);\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9f66', endColorstr='#6c3614',GradientType=0 );\n}\n.bean1, .bean2, .bean3, .bean4, .bean6, .bean5, .bean7, .bean8, .bean9, .bean10, .bean11, .bean12, .bean13, .bean14, .bean15, .bean16, .bean17, .bean18, .bean19, .bean20, .bean21, .bean22, .bean23, .bean24   {\n\tposition: absolute;\n\tz-index: 10;\n\tvisibility: hidden;\n}\n\/* === Media Query === *\/\n@media screen and (max-width: 480px) {\n    #text a {\n       \tletter-spacing: 2px;\n    \tfont-size: 2em;\n    \ttext-shadow: 0 0 1px #000;\n    }\n    #text {\n    \tmargin: 2em auto 0 auto;\n    }\n}\n\/* ========== Bean Placement and animation setup for 8 x 3 different beans ========== *\/\n.bean1 {\n\tmargin-left: 8%;\n\tanimation: floatsmall 18s linear infinite;\n}\n.bean2 {\n\tmargin-left: 35%;\n\tanimation: float 10s linear infinite;\n}\n.bean3 {\n\tmargin-left: 75%;\n\tanimation: float 11s linear infinite, left 11s infinite;\n}\n.bean4 {\n\tmargin-left: 60%;\n\tanimation: float 12s linear infinite;\n}\n.bean5 {\n\tmargin-left: 85%;\n\tanimation: floatsmall 8s linear infinite;\n}\n.bean6 {\n\tmargin-left: 20%;\n\tanimation: float 12s linear infinite, left 12s infinite;\n}\n.bean7 {\n\tmargin-left: 30%;\n\tanimation: floatsmall 9s linear infinite, right 9s infinite;\n}\n.bean8 {\n\tmargin-left: 45%;\n\tanimation: float 7s linear infinite;\n}\n.bean9 {\n\tmargin-left: 1%;\n\tanimation: float 10s linear infinite, right 10s infinite;\n}\n.bean10 {\n\tmargin-left: 96%;\n\tanimation: float 15s linear infinite, right 15s infinite;\n}\n.bean11 {\n\tmargin-left: 52%;\n\tanimation: float 18s linear infinite;\n}\n.bean12 {\n\tmargin-left: 92%;\n\tanimation: float 13s linear infinite;\n}\n.bean13 {\n\tmargin-left: 17%;\n\tanimation: float 17s linear infinite;\n}\n.bean14 {\n\tmargin-left: 67%;\n         animation: float 15s linear infinite;\n}\n.bean15 {\n\tmargin-left: 77%;\n\tanimation: float 10s linear infinite;\n}\n.bean16 {\n\tmargin-left: 20%;\n\tanimation:float 20s linear infinite;\n}\n.bean17 {\n\tmargin-left: 57%;\n\tanimation:float 8s linear infinite;\n}\n.bean18 {\n\tmargin-left: 60%;\n\tanimation: floatsmall 14s linear infinite;\n}\n.bean19 {\n\tmargin-left: 44%;\n\tanimation:float 17s linear infinite;\n}\n.bean20 {\n\tmargin-left: 41%;\n\tanimation:float 11s linear infinite;\n}\n.bean21 {\n\tmargin-left: 32%;\n\tanimation: floatsmall 20s linear infinite;\n}\n.bean22 {\n\tmargin-left: 70%;\n\tanimation: float 20s linear infinite, left 20s infinite;\n}\n.bean23 {\n\tmargin-left: 10%;\n\tanimation:float 19s linear infinite;\n}\n.bean24 {\n\tmargin-left: 20%;\n\tanimation: float 16s linear infinite;\n}\n\/* Coffee Bean Animation Keyframes  *\/\n@keyframes float  {\n\t0%  {visibility:visible; top:-20%;   transform:rotateZ(  0deg);}\n\t100%{visibility:visible; top:1000px; transform:rotateZ(720deg);}\n}\n\/* === FLOATSMALL === *\/\n@keyframes floatsmall  {\n\t0%  {visibility:visible; top:-20%;   transform:rotateZ(  0deg);}\n\t100%{visibility:visible; top:1000px; transform:rotateZ(720deg);}\n} \n\/* === LEFT === *\/\n} \n@keyframes left  {\n\t0%  {visibility:visible; transform:translateX(   0px) rotateZ(  0deg);}\n\t100%{visibility:visible; transform:translateX(-400px) rotateZ(720deg);}\n}\n\/* === RIGHT === *\/\n@keyframes right  {\n\t0%  {visibility:visible; transform:translateX(   0px) rotateZ(   0deg);}\n\t100%{visibility:visible; transform:translateX(300px) rotateZ(-720deg);}\n} \n<\/style>\n<div class=\"ani-box\">\n<div id=\"all\">\n<div class=\"bean1\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean1.png\" alt=\"bean1\" width=\"112\" height=\"93\" \/><\/div>\n<div class=\"bean2\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean2.png\" alt=\"bean2\" width=\"83\" height=\"106\" \/><\/div>\n<div class=\"bean3\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean3.png\" alt=\"bean3\" width=\"84\" height=\"109\" \/><\/div>\n<div class=\"bean4\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean4.png\" alt=\"bean4\" width=\"107\" height=\"85\" \/><\/div>\n<div class=\"bean5\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean5.png\" alt=\"bean5\" width=\"93\" height=\"101\" \/><\/div>\n<div class=\"bean6\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean6.png\" alt=\"bean6\" width=\"83\" height=\"98\" \/><\/div>\n<div class=\"bean7\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean7.png\" alt=\"bean7\" width=\"93\" height=\"92\" \/><\/div>\n<div class=\"bean8\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean8.png\" alt=\"bean8\" width=\"109\" height=\"113\" \/><\/div>\n<div class=\"bean9\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean1.png\" alt=\"bean1\" width=\"112\" height=\"93\" \/><\/div>\n<div class=\"bean10\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean2.png\" alt=\"bean2\" width=\"83\" height=\"106\" \/><\/div>\n<div class=\"bean11\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean3.png\" alt=\"bean3\" width=\"84\" height=\"109\" \/><\/div>\n<div class=\"bean12\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean4.png\" alt=\"bean4\" width=\"107\" height=\"85\" \/><\/div>\n<div class=\"bean13\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean5.png\" alt=\"bean5\" width=\"93\" height=\"101\" \/><\/div>\n<div class=\"bean14\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean6.png\" alt=\"bean6\" width= \"83\" height=\"98\" \/><\/div>\n<div class=\"bean15\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean7.png\" alt=\"bean7\" width= \"93\" height=\"92\" \/><\/div>\n<div class=\"bean16\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean8.png\" alt=\"bean8\" width=\"109\" height=\"113\" \/><\/div>\n<div class=\"bean17\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean1.png\" alt=\"bean1\" width=\"112\" height=\"93\" \/><\/div>\n<div class=\"bean18\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean2.png\" alt=\"bean2\" width=\"83\" height=\"106\" \/><\/div>\n<div class=\"bean19\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean3.png\" alt=\"bean3\" width=\"84\" height=\"109\" \/><\/div>\n<div class=\"bean20\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean4.png\" alt=\"bean4\" width=\"107\" height=\"85\" \/><\/div>\n<div class=\"bean21\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean5.png\" alt=\"bean5\" width=\"93\" height=\"101\" \/><\/div>\n<div class=\"bean22\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean6.png\" alt=\"bean6\" width=\"83\" height=\"98\" \/><\/div>\n<div class=\"bean23\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean7.png\" alt=\"bean7\" width=\"93\" height=\"92\" \/><\/div>\n<div class=\"bean24\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/\ncoffee\/bean8.png\" alt=\"bean8\" width=\"109\" height=\"113\" \/><\/div>\n<\/div>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<p class=\"below-ani\"> It&#8217;s raining coffee beans! The falling coffee beans CSS animation gives the illusion of perpetual falling coffee beans. Substituting the coffee bean images with other images can create a magnitude of effects as with other animations in my collection. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s raining coffee beans! The falling coffee beans CSS animation gives the illusion of perpetual falling coffee beans. Substituting the coffee bean images with other images can create a magnitude of effects as with other animations in my collection.<\/p>\n","protected":false},"author":2,"featured_media":2577,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,13,4,5],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/75"}],"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=75"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":2651,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/75\/revisions\/2651"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2577"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}