{"id":1638,"date":"2018-03-14T22:01:14","date_gmt":"2018-03-14T22:01:14","guid":{"rendered":"http:\/\/thingography.com\/?p=1638"},"modified":"2018-11-06T14:05:16","modified_gmt":"2018-11-06T14:05:16","slug":"css-wrong-place","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-wrong-place\/","title":{"rendered":"Wrong Place CSS Animation"},"content":{"rendered":"<style>\n.ani-box {\n\twidth:100%; height: 700px; position: relative;\n\tbackground-color: #C0C0C0;\n\tbackground: url(\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/wrong-place\/courset.jpg\") no-repeat  center;\n\t-webkit-background-size: cover;\n\t-moz-background-size: cover;\n\t-o-background-size: cover;\n\t-ms-background-size: cover;\n\tbackground-size: cover;\n}\n#prop {\n\tposition: relative;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: 0;\n\tmargin-left: -70px;\n}\n.club img {\n\twidth: 211px;\n\theight: 186px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -40px;\n\tmargin-left: -20px;\n\tanimation: swing 10s infinite;\n\tanimation-delay: 3s;\n    transform-origin: 0 0;\n}\n@keyframes swing {\n\t0%  {transform: rotateX(0deg);}\n\t10% {transform: rotateX(0deg);}\n\t21% {transform: rotateX(-100deg);}\n\t35% {transform: rotateX(205deg);}\n\t65% {transform: rotateX(0deg);}\n\t100%{transform: rotateX(0deg);}\n}\n#g-ball  {\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: 107px;\n\tmargin-left: 0;\n\tanimation: g-ball 10s linear infinite;\n\tanimation-delay: 1.75s;\n}\n@keyframes g-ball {\n\t0%   {transform:scale(1,1);}\n\t25%  {transform:scale(1,1);}\n\t37%  {transform:scale(1,1);}\n\t50%  {transform:scale(5,5);}\n\t100% {transform:scale(5,5) translateY(400px);}\n}\t\n.gcourse {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tleft: 0;\n}\n.shattered {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tleft: 0;\n\tz-index: -2;\n\tanimation: shatter 10s infinite;\n\tanimation-delay: 1.85s;\n}\n.shattered img, .gcourse img {\n\twidth: 100%;\n\theight: 100%;\n}\n@keyframes shatter {\n\t0%   {z-index: -2;}\n\t45%  {z-index: -2;}\n\t50%  {z-index: 10;}\n\t100% {z-index: 10;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"shattered\"> <img decoding=\"async\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/wrong-place\/shatter.png\" alt=\"shattered\" \/><\/div>\n<div class=\"club\"> <img loading=\"lazy\" decoding=\"async\" id=\"Zprop\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/wrong-place\/\/club.png\" alt=\"Golf Club\" width=\"211\" height=\"186\"\/><\/div>\n<p>\t<img loading=\"lazy\" decoding=\"async\" id=\"g-ball\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/wrong-place\/\/g-ball.png\" alt=\"Golf Ball\" width=\"30\" height=\"30\"\/><\/p>\n<\/div>\n<div class=\"below-ani\">Being in the wrong place at the wrong time<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Being in the wrong place at the wrong time<\/p>\n","protected":false},"author":2,"featured_media":2622,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,24,203],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1638"}],"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=1638"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1638\/revisions"}],"predecessor-version":[{"id":2076,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1638\/revisions\/2076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2622"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}