{"id":1814,"date":"2018-03-04T23:55:45","date_gmt":"2018-03-04T23:55:45","guid":{"rendered":"http:\/\/thingography.com\/?p=1814"},"modified":"2025-02-13T20:59:21","modified_gmt":"2025-02-13T20:59:21","slug":"css-tire","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-tire\/","title":{"rendered":"Rolling Car Wheel CSS Animation"},"content":{"rendered":"<style>\n.ani-box {height:450px; width: 100%; animation: bgcc 25s infinite;\nbackground-color: #ffffff;\nbackground-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23020006' fill-opacity='0.22'%3E%3Cpath fill-rule='evenodd' d='M41 37.59V25h-2v12.59l-8.9-8.9-1.41 1.41 8.9 8.9H25v2h12.59l-8.9 8.9 1.41 1.41 8.9-8.9V55h2V42.41l8.9 8.9 1.41-1.41-8.9-8.9H55v-2H42.41l8.9-8.9-1.41-1.41-8.9 8.9zM1 1h2v2H1V1zm0 4h2v2H1V5zm0 4h2v2H1V9zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm4 0h2v2H5v-2zm4 0h2v2H9v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM5 1h2v2H5V1zm4 0h2v2H9V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm0 4h2v2h-2V5zm0 4h2v2h-2V9zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zM5 5h70v70H5V5zm2 68h66V7H7v66zM9 9h62v62H9V9zm2 60h58V11H11v58zm2-39.6V13h16.4A29.1 29.1 0 0 0 13 29.4zM15 15v6.67A31.17 31.17 0 0 1 21.67 15H15zm-2 52V50.6A29.1 29.1 0 0 0 29.4 67H13zm2-8.67V65h6.67A31.17 31.17 0 0 1 15 58.33zM67 67H50.6A29.1 29.1 0 0 0 67 50.6V67zm-8.67-2H65v-6.67A31.17 31.17 0 0 1 58.33 65zM67 13v16.4A29.1 29.1 0 0 0 50.6 13H67zm-2 8.67V15h-6.67A31.17 31.17 0 0 1 65 21.67zM39 13h2v2h-2v-2zm7.02.66l1.93.52-.51 1.93-1.94-.52.52-1.93zm6.61 2.46l1.74 1-1 1.73-1.74-1 1-1.73zm5.75 4.08l1.42 1.42-1.42 1.4-1.4-1.4 1.4-1.42zm4.5 5.43l1 1.74-1.73 1-1-1.74 1.73-1zm2.94 6.42l.52 1.93-1.93.52-.52-1.94 1.93-.51zM67 39v2h-2v-2h2zm-.66 7.02l-.52 1.93-1.93-.51.52-1.94 1.93.52zm-2.46 6.61l-1 1.74-1.73-1 1-1.74 1.73 1zm-4.08 5.75l-1.42 1.42-1.4-1.42 1.4-1.4 1.42 1.4zm-5.43 4.5l-1.74 1-1-1.73 1.74-1 1 1.73zM41 67h-2v-2h2v2zm6.95-1.18l-1.93.52-.52-1.93 1.94-.52.51 1.93zm-13.97.52l-1.93-.52.51-1.93 1.94.52-.52 1.93zm-6.61-2.46l-1.74-1 1-1.73 1.74 1-1 1.73zm-5.75-4.08l-1.42-1.42 1.42-1.4 1.4 1.4-1.4 1.42zm-4.5-5.43l-1-1.74 1.73-1 1 1.74-1.73 1zm-2.94-6.42l-.52-1.93 1.93-.52.52 1.94-1.93.51zM13 41v-2h2v2h-2zm.66-7.02l.52-1.93 1.93.51-.52 1.94-1.93-.52zm2.46-6.61l1-1.74 1.73 1-1 1.74-1.73-1zm4.08-5.75l1.42-1.42 1.4 1.42-1.4 1.4-1.42-1.4zm5.43-4.5l1.74-1 1 1.73-1.74 1-1-1.73zm6.42-2.94l1.93-.52.52 1.93-1.94.52-.51-1.93zM40 63a23 23 0 1 1 0-46 23 23 0 0 1 0 46zm0-2a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0-2a19 19 0 1 1 0-38 19 19 0 0 1 0 38zm0-2a17 17 0 1 0 0-34 17 17 0 0 0 0 34z'\/%3E%3C\/g%3E%3C\/svg%3E\");\n}\n\/* for JS  replay slot-view *\/\n.slot-view {\n\tmargin: 1em auto;\n\tposition: relative;\n\twidth: 100%;\n\theight: 300px;\n}\n.road {\n\tmargin: 0px auto 0;\n\tposition: relative;\n\twidth: 100%;\n\theight: 300px;\n}\n.rim  {transform: rotate(-9000deg);}\n.tire {transform: rotate(36000deg);}\n.rim, .tire {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n        border-radius: 50%;\n}\n.rim {\n\twidth: 206px;\n\theight: 206px;\n        margin-left: -103px;\n        margin-top: -103px;\n\ttransition: transform 90s;\n\ttransition-delay:1s;\n\tanimation:rim 12s;\n}\n.tire {\n        width: 294px; \n        height: 294px; \n        margin-left: -147px;\n        margin-top: -147px;\n\tfont-weight:bold;\n\tfont-size:20px;\n\ttransition: transform 90s;\n\tanimation:tire 12s;\n}\n.tire img, .rim img {\n        width: 100%; \n        height: 100%; \n}\n\/* ===== Div 3 ===== *\/\n@keyframes rim {\n0%\t {transform: rotate(   0deg); left:   50%;}\n25%\t {transform: rotate( 360deg); left: -100px;}\n50%\t {transform: rotate(-180deg); left: 2000px;}\n55%\t {transform: rotate( 360deg); left: -100px;}\n70%\t {transform: rotate(-180deg); left:  400px;}\n100% {transform: rotate( 360deg); left:   50%;}\n}\n\/* ===== Div 2 ===== *\/\n@keyframes tire {\n0%\t {transform: rotate( 3600deg); left:   50%;}\n25%\t {transform: rotate(-2000deg); left: -100px;}\n50%\t {transform: rotate( 2500deg); left:2000px;}\n55%\t {transform: rotate(-2500deg); left:-100px;}\n70%\t {transform: rotate( 2500deg); left: 400px;}\n100% {transform: rotate( 3600deg); left:   50%;}\n}\n\/* ===== Background Color Changes ===== *\/\n@keyframes bgcc {\n0%   {background:#000069;}\n15%  {background:#000069;}\n65%  {background:#004000;}\n100% {background:#000069;}\n}\n\/* =========== Replay Button  =============  *\/\n#control-bar {\n\twidth: 100%;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\ttext-align: center;\n}\n.play {\n\tpadding: 0em 0.5em;\n\tmargin: 1.3em auto 1em auto;\n\tborder: 5px solid #000000;\n\tfont-size: 1.4em;\n\tline-height: 1.4em;\n\ttext-align: center;\n\tz-index: 99;\n}\n.play:hover {\n\tborder-color: #FF3300;\n\tbackground: #FFFF99;\n\tcursor: pointer;\ncolor: #999;\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"slot-wrapper\"><!-- for replay purposes --> <\/p>\n<div id=\"slot-view\">\n<div class=\"road\">\n<div class=\"tire\"> <img loading=\"lazy\" decoding=\"async\" id=\"prop2\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/tire\/tire.png\" alt=\"tire\" width=\"294\" height=\"294\"\/><\/div>\n<div class=\"rim\"> <img loading=\"lazy\" decoding=\"async\" id=\"prop3\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/tire\/rim.png\" alt=\"wire\" width=\"206\" height=\"206\"\/><\/div>\n<\/div>\n<\/div>\n<p> <!-- slot-view -->\n<\/div>\n<p> <!-- Close Slot-Wrapper for replay purposes --><\/p>\n<div id=\"control-bar\">\n\t<button class=\"play tooltip\">Replay<\/button>\n<\/div>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\">A little fun with a rolling car wheel<\/div>\n<p><\/p>\n<p><script src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/slot-machine\/slot-machine.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Replay A little fun with a rolling car wheel<\/p>\n","protected":false},"author":2,"featured_media":2614,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,184,185],"class_list":["post-1814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-tire","tag-wheel"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1814","targetHints":{"allow":["GET"]}}],"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=1814"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1814\/revisions"}],"predecessor-version":[{"id":3807,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1814\/revisions\/3807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2614"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}