{"id":65,"date":"2018-02-18T18:48:45","date_gmt":"2018-02-18T18:48:45","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=65"},"modified":"2025-02-13T21:10:44","modified_gmt":"2025-02-13T21:10:44","slug":"css-clackers","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-clackers\/","title":{"rendered":"Clackers CSS Animation"},"content":{"rendered":"<style>\n.example-1, .example-2, .example-3 {\n\tmargin: 2em auto;\n\twidth: 550px;\n\theight: 550px;\n\tposition: relative;\n}\n.clackers-comment {\n\tpadding: 0.5em;\n\tborder: 2px ridge #000000;\n\tmargin: 0.5em auto 1em auto;\n\twidth: 100%;\n\tfont-size: 1.2em;\n\tcolor: #F2F2F2;\n\ttext-align: center;\n\tline-height: 1.3em;\n\tbackground-color: #666666;\n}\n#last {margin-bottom: 80px;}\n.db1, .db2 {\n\twidth: 150px;\n\theight: 1100px;\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: -550px;\n\tmargin-left: -75px;\n}\n.shaft {\n\tborder: 1px solid #000000;\n\twidth: 10px;\n\theight: 250px;\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tmargin-top: -125px;\n\tmargin-left: -5px;\n\tbackground-color: #FF3300;\n\tz-index: 2;\n}\n.balla1, .balla2, .ballb1, .ballb2 {\n\twidth: 150px;\n\theight: 150px;\n\ttop: 50%;\n\tleft: 50%;\n\tposition: absolute;\n\tbackground-color: #FF3300; \/* Ball default RED Color *\/\n\tborder-radius: 50%;\n\tborder: 1px solid #000000;\n}\n.db2 {animation: spin2 5s linear infinite;}\n.db1  {animation: spin 5s linear infinite;}\n.balla1, .ballb1 {\n\tmargin-top: -275px;\n\tmargin-left: -75px;\n}\n.balla2, .ballb2 {\n\tmargin-top: 125px;\n\tmargin-left: -75px;\n}\n\/*  ====== END FIXED ===== *\/\n\/*  ============== Example-2 ============== *\/\n.example-2 .balla1, .example-2 .ballb1 {animation: color 2.5s linear infinite;}\n.example-2 .balla2,  .example-2 .ballb2 {animation: color2 2.5s linear infinite;}\n\/*  ======= Example-3 ========== *\/\n.example-3 .db1  {animation: bounce .625s linear infinite;}\n.example-3 .db2  {animation:bounce2 .625s linear infinite;}\n\/*  ============= Animation Keyframes  ============= *\/\n@keyframes spin {\n\t0%   { transform: rotateZ(  0deg);}\n\t100% { transform: rotateZ(720deg);}\n}\n@keyframes spin2 {\n\t0%   { transform: rotateZ(   0deg);}\n\t100% { transform: rotateZ(-720deg);}\n}\n@keyframes color {\n\t0%    {background-color: red;  opacity: 1}\n\t25%   {background-color: red;  opacity: 1}\n\t25.01%{background-color: blue; opacity: 0.5}\n\t25.2% {background-color: blue; opacity: 1}\n\t75%   {background-color: blue; opacity: 1}\n\t75.01%{background-color: red;  opacity: 0.5}\n\t75.2% {background-color: red;  opacity: 1}\n\t100%  {background-color: red;  opacity: 1}\n}\n@keyframes color2 {\n\t0%    {background-color: blue; opacity: 1}\n\t25%   {background-color: blue; opacity: 1}\n\t25.01%{background-color: red;  opacity: 0.5}\n\t25.2% {background-color: red;  opacity: 1}\n\t75%   {background-color: red;  opacity: 1}\n\t75.01%{background-color: blue; opacity: 0.5}\n\t75.2% {background-color: blue; opacity: 1}\n\t100%  {background-color: blue; opacity: 1}\n}\n@keyframes bounce {\n\t0%   { transform: rotateZ( -21.6deg);}\n\t50%  { transform: rotateZ( -68.5deg);}\n\t100% { transform: rotateZ( -21.6deg);}\n}\n@keyframes bounce2 {\n\t0%   {transform: rotateZ( 21.6deg);}\n\t50%  {transform: rotateZ( 68.5deg);}\n\t100% {transform: rotateZ( 21.6deg);}\n}\n<\/style>\n<div id=\"ani-box\">\n<div class=\"clackers-comment\"> Clackers or Loaders for lack of a better name.<br \/>\n<br \/> Here are three versions of this illusion, reminiscent of the Clackers toy.\n<\/div>\n<div class=\"example-1\">\n<div class=\"db1\">\n<div class=\"shaft\"><\/div>\n<div class=\"balla1\"><\/div>\n<div class=\"balla2\"><\/div>\n<\/p><\/div>\n<div class=\"db2\">\n<div class=\"shaft\"><\/div>\n<div class=\"ballb1\"><\/div>\n<div class=\"ballb2\"><\/div>\n<\/div>\n<\/div>\n<p> <!-- Example-1 --><\/p>\n<div class=\"clackers-comment\"> In the first example, the two &#8216;barbells&#8217; are rotating opposite directions,<br \/>\n<br \/> which can create the optical illusion of the balls bouncing off each other.\n<\/div>\n<div class=\"example-2\">\n<div class=\"db1\">\n<div class=\"shaft\"><\/div>\n<div class=\"balla1\"><\/div>\n<div class=\"balla2\"><\/div>\n<\/p><\/div>\n<div class=\"db2\">\n<div class=\"shaft\"><\/div>\n<div class=\"ballb1\"><\/div>\n<div class=\"ballb2\"><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Example-2 --><\/p>\n<div class=\"clackers-comment\"> In the second, the lower two balls are always blue and upper two are red.<br \/>\n<br \/> It is the same as the first, only the colors are changing.\n<\/div>\n<div class=\"example-3\">\n<div class=\"db1\">\n<div class=\"shaft\"><\/div>\n<div class=\"balla1\"><\/div>\n<div class=\"balla2\"><\/div>\n<\/p><\/div>\n<div class=\"db2\">\n<div class=\"shaft\"><\/div>\n<div class=\"ballb1\"><\/div>\n<div class=\"ballb2\"><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Example-3 --><\/p>\n<div class=\"clackers-comment\" id=\"last\"> In the third, the balls are actually bouncing off each other.<br \/>\n<br \/> The &#8216;barbells&#8217; rotate until contact and then reverse direction.\n<\/div>\n<\/p><\/div>\n<p> <!-- Close  Ani  --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Clackers or Loaders for lack of a better name. Here are three versions of this illusion, reminiscent of the Clackers toy. In the first example, the two &#8216;barbells&#8217; are rotating opposite directions, which can create the optical illusion of the<\/p>\n","protected":false},"author":2,"featured_media":2574,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,11,4,5],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-clackers","tag-css","tag-css-animation"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/65","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=65"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":2653,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/65\/revisions\/2653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2574"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}