{"id":59,"date":"2018-02-18T18:43:41","date_gmt":"2018-02-18T18:43:41","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=59"},"modified":"2018-11-06T14:46:05","modified_gmt":"2018-11-06T14:46:05","slug":"css-b-ball","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-b-ball\/","title":{"rendered":"B-Ball CSS Animation"},"content":{"rendered":"<style>\n.ani-box {\nbackground: url(http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/b-ball\/floor.png) no-repeat center center fixed; \nbackground-size: cover;\noverflow: hidden;\n}\n.court {\nwidth: 100%;\nheight: 350px;\nmargin: 0 auto;\n}\n.ballbox, .bounce1, .bounce2  {\nposition: relative;\nwidth: 33%;\nheight: 300px;\ndisplay: inline-block;\nmargin: 0 auto;\ntext-align: center;\n}\n.ballbox {margin-top: -500px; height: 800px;}\n.ballbox img, .bounce1 img, .bounce2 img {\nmargin: 0 auto;\n} \n.bounce1 img {\nanimation: bouncing 2s linear infinite;\n}\n.bounce2 img {\nanimation: bouncing 2.4s linear infinite;\n}\n@keyframes bouncing {\n0%   {transform: translate(0px, 0px)  rotate(0deg);}\n25%  {transform: translate(0px,200px) rotate(90deg);}\n50%  {transform: translate(0px,  0px) rotate(-90deg);}\n75%  {transform: translate(0px,200px) rotate(90deg);}\n100% {transform: translate(0px,  0px) rotate(0deg);}\n}\n.ballbox img {\nanimation: b-ball 2.4s linear infinite;\n}\n@keyframes b-ball {\n0%   {transform: translate(0px, 0px)  rotate(0deg)   scale(1.5);}\n25%  {transform: translate(0px,200px) rotate(90deg)  scale(.4);}\n50%  {transform: translate(0px,  0px) rotate(-90deg) scale(.2);}\n75%  {transform: translate(0px,200px) rotate(90deg)  scale(.4);}\n100% {transform: translate(0px,  0px) rotate(0deg)   scale(1.5);}\n}\n.ballbox2, .ballbox3 {\nwidth: 100%; \nheight: 300px; \nposition: relative;\n}\n.ballbox2 img {\nanimation: b-ball2 4s linear infinite;\n}\n.ballbox3 img {\nanimation: b-ball2 4s linear infinite;\nanimation-delay: 2s;\nwidth: 250px; \nheight: 250px;\nmargin-left:-20%;\n}\n.ballbox3 {\nmargin-top: -300px;\nz-index: 2;\n}\n@keyframes b-ball2 {\n0%   {transform: rotate(0deg)  scale(1.5); margin-left:-40%;}\n50%  {transform: rotate(180deg) scale(.4); margin-left: 50%;}\n100% {transform: rotate(360deg)  scale(1.5); margin-left: 140%;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"court\">\n<div class=\"bounce1\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/b-ball\/b-ball2.png\" alt=\"b-ball2\" \/><\/div>\n<div class=\"ballbox\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/b-ball\/b-ball.png\" \/><\/div>\n<div class=\"bounce2\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/b-ball\/b-ball2.png\" alt=\"b-ball2\" \/><\/div>\n<\/p><\/div>\n<div class=\"court\">\n<div class=\"ballbox2\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/b-ball\/b-ball.png\" \/><\/div>\n<div class=\"ballbox3\"><img decoding=\"async\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/b-ball\/b-ball2.png\" \/><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<p> This is a basic CSS animation show bouncing basket balls. Simple and straight forward demo using multiple images, including the background court floor. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a basic CSS animation show bouncing basket balls. Simple and straight forward demo using multiple images, including the background court floor.<\/p>\n","protected":false},"author":2,"featured_media":2572,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,9,4,5],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/59"}],"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=59"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":2655,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/59\/revisions\/2655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2572"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}