{"id":56,"date":"2018-02-18T18:39:53","date_gmt":"2018-02-18T18:39:53","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=56"},"modified":"2025-02-13T21:11:04","modified_gmt":"2025-02-13T21:11:04","slug":"css-atom","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-atom\/","title":{"rendered":"Atom CSS Animation"},"content":{"rendered":"<style>\n.ani-box {\nwidth: 100%;\nheight: auto;\noverflow: hidden;\n}\n.css-atom {\nmargin: 0 auto;\nwidth: 300px; \nheight: 300px; \nmargin: 50px auto;\nposition: relative;\n}\n.electron {\nfont-size: 20px;\ncolor: #0018A5;\ntext-shadow: 0 0 10px #FF0000;\nbox-shadow: 0 0 4px 1px rgba(255, 0, 0, 0.15);\nwidth: 100%;\nheight: 100%;\nborder-radius: 50%;\ntext-align: center;\nvertical-align: super;\ntransform-origin: 50% 50%;\nposition: absolute;\ntop: 0;\nleft: 0;\n}\n.nucleus {\nposition: absolute; \nwidth: 26px; height: 26px; \nborder-radius: 50%;  \nbackground-color: red; \nleft: 50%; top: 50%; \nmargin-left: -13px; \nmargin-right: -13px;  \nanimation: pro-cloud 30s linear infinite;\n}\n.layer2 {\nwidth: 300px; \nheight: 300px; \nposition: absolute; top: 0; left:0;\n}\n.layer0 {\nwidth: 250px; \nheight: 250px; \nposition: absolute;\nleft: 50%; top: 50%;\nmargin-left: -125px;margin-top: -125px;\n}\n.layer1 {\nwidth: 200px; \nheight: 200px; \nposition: absolute;\nleft: 50%; top: 50%;\nmargin-left: -100px;margin-top: -100px;\n}\n.layer1 {\ntransform:rotateZ(90deg); \n}\n.layer2 {\ntransform:rotateZ(-45deg);\n}\n.ele1, .ele2, .ele3, .ele4, .ele5, .ele6, .ele7, .ele8, .ele9, .ele0 {\nwidth: 100%; \nheight: 100%;\nposition: absolute; top: 0; left:0;\n}\n.ele1 {animation: electron-all 50s linear infinite;}\n.ele2 {animation: electron-all 60s linear infinite; animation-delay: -100ms;}\n.ele3 {animation: electron-all 40s linear infinite; animation-delay: -300ms;}\n.ele4 {animation: electron-all 80s linear infinite; animation-delay: -500ms;}\n.ele5 {animation: electron-all 90s linear infinite; animation-delay: -700ms;}\n.ele6 {animation: electron-all 10s linear infinite; animation-delay: -900ms;}\n.ele7 {animation: electron-all 40s linear infinite; animation-delay: -800ms;}\n.ele8 {animation: electron-all 90s linear infinite; animation-delay: -600ms;}\n.ele9 {animation: electron-all 50s linear infinite; animation-delay: -400ms;}\n.ele0 {animation: electron-all 70s linear infinite; animation-delay: -200ms;}\n.layer2 .electron {\nanimation: electron-opp 50s linear infinite;\n}\n.e0, .e1, .e2, .e3, \n.e4, .e5, .e6, .e7, \n.e8, .e9 {\nwidth: 100%;\nheight: 100%;\nposition: absolute; top: 0; left:0;\n}\n.e1 {transform: rotateY(0deg);}\n.e2 {transform: rotateY(10deg);}\n.e3 {transform: rotateY(20deg);}\n.e4 {transform: rotateY(30deg);}\n.e5 {transform: rotateY(40deg);}\n.e6 {transform: rotateY(50deg);}\n.e7 {transform: rotateY(60deg);}\n.e8 {transform: rotateY(70deg);}\n.e9 {transform: rotateY(80deg);}\n.e0 {transform: rotateY(89deg);}\n.s0, .s1, .s2, .s3, \n.s4, .s5, .s6, .s7, \n.s8, .s9 {\nwidth: 100%;\nheight: 100%;\nposition: absolute; top: 0; left:0;\n}\n.s1 {transform: rotateY(0deg);} \n.s2 {transform: rotateY(10deg);}\n.s3 {transform: rotateY(20deg);}\n.s4 {transform: rotateY(30deg);}\n.s5 {transform: rotateY(40deg);}\n.s6 {transform: rotateY(50deg);}\n.s7 {transform: rotateY(60deg);}\n.s8 {transform: rotateY(70deg);}\n.s9 {transform: rotateY(80deg);}\n.s0 {transform: rotateY(89deg);}\n.p0, .p1, .p2, .p3, \n.p4, .p5, .p6, .p7, \n.p8, .p9 {\nwidth: 100%;\nheight: 100%;\nposition: absolute; top: 0; left:0;\n}\n.p1 {transform: rotateY(0deg);}\n.p2 {transform: rotateY(10deg);}\n.p3 {transform: rotateY(20deg);}\n.p4 {transform: rotateY(30deg);}\n.p5 {transform: rotateY(40deg);}\n.p6 {transform: rotateY(50deg);}\n.p7 {transform: rotateY(60deg);}\n.p8 {transform: rotateY(70deg);}\n.p9 {transform: rotateY(80deg);}\n.p0 {transform: rotateY(89deg);}\n@keyframes electron-all {\n0%   {transform: rotateZ(-34400deg);}\n100% {transform: rotateZ(14400deg);}\n}\n@keyframes electron-opp {\n0%   {transform: rotateZ(48800deg);}\n100% {transform: rotateZ(-28800deg);}\n}\n@keyframes pro-cloud {\n0%  {transform: rotateZ(0deg); box-shadow:5px 5px 5px 20px red, 5px 0 20px 20px #FFFF00;}\n50%  {transform: rotateZ(1440deg); box-shadow:5px 5px 5px  5px red, 5px 0 50px 10px #FFFF00;}\n100% {transform: rotateZ(0deg); box-shadow:5px 5px 5px 20px red, 5px 0 20px 20px #FFFF00;}\n}\n.no-orbit .electron {box-shadow:none;}\n<\/style>\n<div class=\"css-atom\">\n<div class=\"nucleus\"><\/div>\n<div class=\"layer0\">\n<div class=\"e1\">\n<div class=\"ele1\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e2\">\n<div class=\"ele2\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e3\">\n<div class=\"ele3\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e4\">\n<div class=\"ele4\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e5\">\n<div class=\"ele5\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e6\">\n<div class=\"ele6\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e7\">\n<div class=\"ele7\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e8\">\n<div class=\"ele8\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e9\">\n<div class=\"ele9\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e0\">\n<div class=\"ele0\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div><\/div>\n<div class=\"layer1\">\n<div class=\"s1\">\n<div class=\"ele1\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s2\">\n<div class=\"ele2\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s3\">\n<div class=\"ele3\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s4\">\n<div class=\"ele4\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s5\">\n<div class=\"ele5\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s6\">\n<div class=\"ele6\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s7\">\n<div class=\"ele7\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s8\">\n<div class=\"ele8\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e9\">\n<div class=\"ele9\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s0\">\n<div class=\"ele0\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div><\/div>\n<div class=\"layer2\">\n<div class=\"p1\">\n<div class=\"ele1\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p2\">\n<div class=\"ele2\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p3\">\n<div class=\"ele3\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p4\">\n<div class=\"ele4\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p5\">\n<div class=\"ele5\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p6\">\n<div class=\"ele6\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p7\">\n<div class=\"ele7\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p8\">\n<div class=\"ele8\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p9\">\n<div class=\"ele9\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p0\">\n<div class=\"ele0\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div><\/div>\n<\/p><\/div>\n<p> <!-- #atom --><\/p>\n<p> The first &#038; second Atom animation are done with PURE CSS &#8211; the first has electron orbital trail effect&#8230; <\/p>\n<div class=\"css-atom no-orbit\">\n<div class=\"nucleus\"><\/div>\n<div class=\"layer0\">\n<div class=\"e1\">\n<div class=\"ele1\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e2\">\n<div class=\"ele2\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e3\">\n<div class=\"ele3\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e4\">\n<div class=\"ele4\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e5\">\n<div class=\"ele5\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e6\">\n<div class=\"ele6\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e7\">\n<div class=\"ele7\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e8\">\n<div class=\"ele8\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e9\">\n<div class=\"ele9\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e0\">\n<div class=\"ele0\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div><\/div>\n<div class=\"layer1\">\n<div class=\"s1\">\n<div class=\"ele1\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s2\">\n<div class=\"ele2\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s3\">\n<div class=\"ele3\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s4\">\n<div class=\"ele4\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s5\">\n<div class=\"ele5\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s6\">\n<div class=\"ele6\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s7\">\n<div class=\"ele7\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s8\">\n<div class=\"ele8\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"e9\">\n<div class=\"ele9\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"s0\">\n<div class=\"ele0\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div><\/div>\n<div class=\"layer2\">\n<div class=\"p1\">\n<div class=\"ele1\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p2\">\n<div class=\"ele2\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p3\">\n<div class=\"ele3\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p4\">\n<div class=\"ele4\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p5\">\n<div class=\"ele5\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p6\">\n<div class=\"ele6\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p7\">\n<div class=\"ele7\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p8\">\n<div class=\"ele8\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p9\">\n<div class=\"ele9\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div>\n<div class=\"p0\">\n<div class=\"ele0\">\n<div class=\"electron\">&#8226;<\/div>\n<\/div>\n<\/div><\/div>\n<\/p><\/div>\n<p> <!-- #atom --><\/p>\n<style>\n#atom-0 {\nwidth: 100%;\nheight: 500px;\nposition: relative;\nbackground-color: #000069;\nmargin: 0 auto;\n}\n.prop1, .prop2, .prop3, .prop4, .prop5, .prop6, .prop7, .prop8, .prop9 {\nwidth: 300px;\nheight: 300px;\nposition: absolute;\ntop: 50%;\nleft: 50%;\nmargin-top: -150px;\nmargin-left: -150px;\n}\n.prop1 {animation: electron1 50s linear infinite;}\n.prop2 {animation: electron2 50s linear infinite;}\n.prop3 {animation: electron3 50s linear infinite;}\n.prop4 {animation: electron4 50s linear infinite;}\n.prop5 {animation: electron5 50s linear infinite;}\n.prop6 {animation: electron6 50s linear infinite;}\n.prop7 {animation: electron7 50s linear infinite;}\n.prop8 {animation: electron8 50s linear infinite;}\n.prop9 {animation: electron9 50s linear infinite;}\n.atom-nucleus {\nposition: absolute;\ntop: 50%;\nleft: 50%;\nmargin-top: -12px;\nmargin-left: -12px;\nwidth: 24px;\nheight: 24px;\nbackground-color: yellow;\nborder-radius: 50%;\nanimation: nuke 3s linear infinite;\n}\n.sd {border: solid 1px rgba(255, 255, 255, 0.75); border-radius: 50%;}\t\n@keyframes nuke {\n0%   {transform: rotateZ(0deg) scale(0.5); box-shadow: 0 0 20px 5px #FF0000;}\n50%  {transform: rotateZ(1440deg) scale(1.0); box-shadow: 0 0 10px 5px #FF00FF;}\n100% {transform: rotateZ(0deg) scale(0.5); box-shadow: 0 0 20px 5px #FF0000;}\n}\n@keyframes electron1 {\n0%   {transform: rotateX(0deg) skew(0deg,10deg) scale(0.5,0.7);}\n100% {transform: rotateX(-30000deg) skew(-10deg,-10deg) scale(1.2,1.2);}\n}\n@keyframes electron2 {\n0%   {transform: rotateY(0deg) skew(0deg,10deg) scale(0.6,0.8);}\n100% {transform: rotateY(-30000deg) skew(-10deg,-10deg) scale(1.1,1.1);}\n}\n@keyframes electron3 {\n0%   {transform: rotateZ(0deg) skew(0deg,0deg) scale(0.1,0.1);}\n100% {transform: rotateZ(-30000deg) skew(-10deg,-10deg) scale(0.2,0.2);}\n}\n@keyframes electron4 {\n0%   {transform: rotateX(0deg) skew(0deg,0deg) scale(0.5,0.5);}\n100% {transform: rotateX(20000deg) skew(10deg,10deg) scale(0.5,0.8);}\n}\n@keyframes electron5 {\n0%   {transform: rotateY(0deg) skew(0deg,0deg)scale(0.4,0.4);;}\n100% {transform: rotateY(20000deg) skew(10deg,10deg) scale(0.8,0.8);}\n}\n@keyframes electron6 {\n0%   {transform: rotateZ(0deg) skew(0deg,0deg) scale(0.4,0.3);}\n100% {transform: rotateZ(20000deg) skew(10deg,10deg) scale(0.1,0.15);}\n}\n@keyframes electron7 {\n0%   {transform: rotateX(10deg) skew(0deg,0deg) scale(0.6,0.8);}\n100% {transform: rotateX(-40000deg) skew(-10deg,-10deg) scale(1,1);}\n}\n@keyframes electron8 {\n0%   {transform: rotateY(0deg) skew(0deg,0deg) scale(1,1);}\n100% {transform: rotateY(40000deg) skew(-10deg,-10deg) scale(1,1.2);}\n}\n@keyframes electron9 {\n0%   {transform: rotateZ(0deg) skew(10deg,0deg) scale(0.4,0.3);}\n100% {transform: rotateZ(-40000deg) skew(-10deg,-10deg) scale(0.1,0.1);}\n}<\/p>\n<\/style>\n<div class=\"ani-box\" style=\"background-color: #000069;\">\n<div class=\"css-atom\">\n<div class=\"atom-nucleus\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"prop1\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><img loading=\"lazy\" decoding=\"async\" class=\"prop2\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><img loading=\"lazy\" decoding=\"async\" class=\"prop3\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"prop4\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><img loading=\"lazy\" decoding=\"async\" class=\"prop5\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><img loading=\"lazy\" decoding=\"async\" class=\"prop6\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"prop7\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><img loading=\"lazy\" decoding=\"async\" class=\"prop8\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/><img loading=\"lazy\" decoding=\"async\" class=\"prop9\" src=\"http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/atom\/electron.png\" alt=\"Atom\" width=\"300\" height=\"300\"\/>\n<\/div>\n<p> <!-- Close  CSS Atom  -->\n<\/div>\n<p> <!-- Ani-Box --><\/p>\n<p> This CSS Atom animation was created using a PNG for the orbital effect, which was cleaner than using a div tag for a pure CSS atom animation as shown below.<\/p>\n<p\/>\n<div class=\"ani-box\" style=\"background-color: #000069;\">\n<div class=\"css-atom\">\n<div class=\"atom-nucleus\"><\/div>\n<div class=\"prop1 sd\"> <\/div>\n<div class=\"prop2 sd\"> <\/div>\n<div class=\"prop3 sd\"> <\/div>\n<div class=\"prop4 sd\"> <\/div>\n<div class=\"prop5 sd\"> <\/div>\n<div class=\"prop6 sd\"> <\/div>\n<div class=\"prop7 sd\"> <\/div>\n<div class=\"prop8 sd\"> <\/div>\n<div class=\"prop9 sd\"> <\/div>\n<\/div>\n<p> <!-- CSS Atom-0  -->\n<\/div>\n<p>Pure CSS atom animation &#8211; created using only CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; The first &#038; second Atom animation are done with PURE<\/p>\n","protected":false},"author":2,"featured_media":2571,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,8,4,5],"class_list":["post-56","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-atom","tag-css","tag-css-animation"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/56","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=56"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":2656,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/56\/revisions\/2656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2571"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}