{"id":122,"date":"2018-02-18T20:51:46","date_gmt":"2018-02-18T20:51:46","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=122"},"modified":"2019-02-18T23:24:11","modified_gmt":"2019-02-18T23:24:11","slug":"css-golfball","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-golfball\/","title":{"rendered":"Golf Ball Sequence CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height: 700px; width: 100%;}\n.golf-bg { width: 100%; height: 100%; position: absolute; }\n#shot {\n\tmargin: 0px auto;\n\tposition: relative;\n\twidth: 500px;\n\theight: 500px;\nbox-sizing: content-box;\nz-index: 5;\n}\n@media screen and (max-width: 480px) {\n    #shot {transform:scale(0.5); left: -20%;}\n}\n.club {\n\twidth: 211px;\n\theight: 186px;\n\tposition: relative;\n\ttop: 85%;\n\tleft: 47%;\nbox-sizing: content-box;\n\tanimation: swing 10s linear infinite;\n transform-origin: 50% 0%;\n}\n@keyframes swing  {\n\t0%  {transform: rotateX(0deg);}\n\t22% {transform: rotateX(0deg);}\n\t30% {transform: rotateX(-100deg);}\n\t50% {transform: rotateX(205deg);}\n\t100%{transform: rotateX(0deg);}\n}\n#g-ball  {\n\tposition: relative;\n\tmargin-top: 250px;\n\tmargin-left: 141px;\n\topacity: 1.0;\n\tvisibility: hidden;\nbox-sizing: content-box;\n\tanimation: g-ball 10s linear infinite;\n}\n@keyframes g-ball  {\n\t0%  {transform:scale(0.09); opacity:1.0; visibility: visible;}\n\t25% {transform:scale(0.09);}\n\t37% {transform:scale(0.09); margin-top: 250px;}\n\t50% {transform:scale(2.0); margin-top: -50px;}\n\t80% {transform:scale(2.0); margin-top: -50px; opacity:1.0;}\n\t100%{transform:scale(2.0); margin-top: -50px; opacity:0.0;}\n}\t\n#text {\n\tmargin: -192px auto 0px auto;\n\tfont-size: 1.7em;\nline-height: 1.05em;\n\tcolor: #000000;\n\ttext-align: center;\n\tfont-weight: bold;\n\tvisibility: hidden;\n\tposition: relative;\n\tz-index: 13;\n\tleft: 15px;\n\tanimation: btext 10s linear infinite;\n}\n@keyframes btext {\n0%  {transform:scale(0.03); visibility: visible;}\n37% {transform:scale(0.03);}\n50% {transform:scale(1.7);}\n80% {transform:scale(1.7); opacity:1.0;}\n100%{transform:scale(1.7); opacity:0.0;}\n}\t\n<\/style>\n<div class=\"ani-box\">\n<img decoding=\"async\"  class=\"golf-bg\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/golfball\/courset.jpg\" \/><\/p>\n<div id=\"shot\">\n\t\t<img loading=\"lazy\" decoding=\"async\" class=\"club\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/golfball\/club40.png\" alt=\"Golf Club\" width=\"211\" height=\"186\"\/><br \/>\n\t\t<img loading=\"lazy\" decoding=\"async\" id=\"g-ball\" src=\"http:\/\/www.thingography.com\/my-things\/wp-content\/uploads\/css-img\/golfball\/g-ball.png\" alt=\"Golf Ball\" width=\"250\" height=\"250\"\/><\/p>\n<p id=\"text\"> Thingography.com<br \/> CSS Animation<br \/> Gallery<\/p>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Thingography.com CSS Animation Gallery<\/p>\n","protected":false},"author":2,"featured_media":2588,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,22],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/122"}],"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=122"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":2871,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/122\/revisions\/2871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2588"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}