{"id":87,"date":"2018-02-18T20:02:43","date_gmt":"2018-02-18T20:02:43","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=87"},"modified":"2019-02-18T17:07:22","modified_gmt":"2019-02-18T17:07:22","slug":"css-drain","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-drain\/","title":{"rendered":"Drain Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 475px; position relative; overflow: hidden;}\n#drain {\n\twidth: 400px;\n\theight: 400px;\n\tmargin: -1em auto 0px auto;\n\tposition: relative;\n\tborder-radius: 50%;\n\tpadding-bottom: 0px;\n box-sizing: content-box;\n}\n@media screen and (max-width: 720px) {\n    #drain {transform: scale(0.7); top: -50px;}\n    .ani-box {height: 400px;}\n}\n@media screen and (max-width: 420px) {\n    #drain {transform: scale(0.4); top: -100px; left: -10%;}\n    .ani-box {height: 300px;}\n}\n#drain {\n\tbox-shadow: 0 0 0px 5px #555, 0 0 100px 20px #0000FF inset;\n\tbackground: #000000;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #000000 0%, #1e5799 18%, #1e5799 42%, #2988d7 99%, #2989d8 100%);\n\tbackground: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(18%,#1e5799), color-stop(42%,#1e5799), color-stop(99%,#2988d7), color-stop(100%,#2989d8));\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);\n\tbackground: -o-radial-gradient(center, ellipse cover,  #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);\n\tbackground: -ms-radial-gradient(center, ellipse cover,  #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);\n\tbackground: radial-gradient(ellipse at center,  #000000 0%,#1e5799 18%,#1e5799 42%,#2988d7 99%,#2989d8 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2989d8',GradientType=1 );\n}\n.circum, .circum2, .circum3, .circum4, .circum5 {\n\twidth: 125px;\n\theight: 125px;\n\tposition: absolute;\n\tborder-radius: 50%;\n\tmargin-top: -63px;\n\tmargin-left: -63px;\n\ttop: 50%;\n\tleft: 50%;\n\tanimation: circum 25s cubic-bezier(0.8, 0.0, 1.0, 0.8) infinite;\n}\n.circum2 {\n\tanimation-delay: 5s;\n}\n.circum3 {\n\tanimation-delay: 10s;\n}\n.circum4 {\n\tanimation-delay: 15s;\n}\n.circum5 {\n\tanimation-delay: 20s;\n}\n.ball-red, .ball-blue, .ball-yellow, .ball-green, .ball-purple {\n\tborder: 5px solid #000000;\n\twidth: 45px;\n\theight: 45px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tmargin-left: -25px;\n\tmargin-top: -25px;\n\tleft: 50%;\n\ttop: 50%;\n\topacity:0;\t\n\tanimation: ball-roll 25s linear infinite;\n}\n.ball-red {\n\tbackground-color: #FF0000;\n}\n.ball-blue {\n\tbackground-color: #00FFFF;\n\tanimation-delay: 5s;\n} \n.ball-yellow {\n\tbackground-color: #FFFF00;\n\tanimation-delay: 10s;\n}\n.ball-green{\n\tbackground-color: #009900;\n\tanimation-delay: 15s;\n}\n.ball-purple{\n\tbackground-color: #FF00FF;\n\tanimation-delay: 20s;\n}\n@keyframes circum {\n0%   {transform: rotateZ(  0deg);}\n100% {transform: rotateZ(5760deg);}\n} \n@keyframes ball-roll {\n0%  {opacity:1; margin-top:400px;}\n50% {opacity:1; margin-top:200px;}\n90% {opacity:1; transform: scale(1.0);}\n100%{opacity:.3; transform: scale(0.1);} \n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"drain\">\n<div class=\"circum\">\n<div class=\"ball-red\"><\/div>\n<\/p><\/div>\n<div class=\"circum2\">\n<div class=\"ball-blue\"><\/div>\n<\/p><\/div>\n<div class=\"circum3\">\n<div class=\"ball-yellow\"><\/div>\n<\/p><\/div>\n<div class=\"circum4\">\n<div class=\"ball-green\"><\/div>\n<\/p><\/div>\n<div class=\"circum5\">\n<div class=\"ball-purple\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p class=\"below-ani\"> Multi-colored balls spinning down a drain.  Other ideas for this type of animation could be a Roulette wheel, gumball machine, or basketball spinning on the rim, to name a few. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Multi-colored balls spinning down a drain. Other ideas for this type of animation could be a Roulette wheel, gumball machine, or basketball spinning on the rim, to name a few.<\/p>\n","protected":false},"author":2,"featured_media":2580,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,15,16],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/87"}],"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=87"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":2803,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/87\/revisions\/2803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2580"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}