{"id":136,"date":"2018-02-18T21:56:45","date_gmt":"2018-02-18T21:56:45","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=136"},"modified":"2025-02-13T21:07:59","modified_gmt":"2025-02-13T21:07:59","slug":"css-newtons-cradle","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-newtons-cradle\/","title":{"rendered":"Newton&#8217;s Cradle Pure CSS Animation"},"content":{"rendered":"<style>\n.ani-box { height: 530px;}\n\/* ======= Newton's Cradle Box - ======== *\/\n.box  {\n\twidth: 570px;\n\theight: auto;\n\tmargin: 0 auto;\n\tpadding: 0;\n\tposition: relative;\n\toverflow: hidden;\n}\n@media screen and (max-width: 900px) {\n    .box {\n        transform:scale(0.8);\n\ttransform-origin: top center;\n    }\n}\n@media screen and (max-width: 720px) {\n    .box {\n        transform:scale(0.6);\n        transform-origin: top center;\n    }\n}\n@media screen and (max-width: 500px) {\n     .box {\n        transform:scale(0.4);\n        transform-origin: top center;\n        margin-left: -25%;\n    }\n}\n@media screen and (max-width: 320px) {\n     .box {\n        transform:scale(0.3);\n        transform-origin: top center;\n        margin-left: -40%;\n    }\n}\n@media screen and (max-width: 280px) {\n     .box {\n        transform:scale(0.2);\n        transform-origin: top center;\n        margin-left: -55%;\n    }\n}\n\/* ========= Cradle Frame ========= *\/\n#frame {\n\twidth: 570px;\n\theight: 430px;\n}\n.frametop, .frametop2, .frameleg1, .frameleg2, .frameleg3, .frameleg4  {\n\twidth: 520px;\n\theight: 30px;\n\ttop: 5px;\n\tleft: 1px;\n\tposition: absolute;\n\tborder-radius: 5px;\n\tbackground: rgb(149,149,149); \n\tbackground: -moz-linear-gradient(top,  rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); \n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1)));\n\tbackground: -webkit-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); \n\tbackground: -o-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); \n\tbackground: -ms-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); \n\tbackground: linear-gradient(to bottom,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 );\n}\n.frametop2  {\n\twidth: 530px;\n\theight: 30px;\n\ttop: 30px;\n\tleft: 40px;\n\tz-index: 10;\n}\n.frameleg1, .frameleg2, .frameleg3, .frameleg4  {\n\ttransform: rotateZ(90deg);\n}\n.frameleg1  {\n\tleft: -155px;\n\ttop: 208px;\n\twidth: 380px;\n\tz-index: 1;\n}\n.frameleg2  {\n\tleft: -120px;\n\ttop: 215px;\n\twidth: 400px;\n\tz-index: 6;\n}\n.frameleg3  {\n\tleft: 300px;\n\ttop: 208px;\n\twidth: 380px;\n\tz-index: 1;\n}\n.frameleg4  {\n\tleft: 335px;\n\ttop: 215px;\n\twidth: 400px;\n\tz-index: 6;\n}\n\/* ========= Ball & String ========== *\/\n#bas {\n\twidth: 570px;\n\theight: 430px;\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n}\n.bas1, .bas2, .bas3, .bas4, .bas5  {\n\tmargin: -255px 0px 0px 60px;\n\twidth: 60px;\n\theight: 600px;\n\tposition: absolute;\n\tz-index: 5;\n}\n.bas1  {\n\tmargin: -255px 0px 0px 130px;\n\ttransform: rotate(25deg);\n\tanimation: ball1 2.5s linear infinite;\n}\n@keyframes ball1  {\n0%  {transform:rotate(25deg);}\n25% {transform:rotate( 0deg);}\n50% {transform:rotate( 0deg);}\n75% {transform:rotate( 0deg);}\n100%{transform:rotate(25deg);}\n}\n.bas2  {margin-left: 190px;}\n.bas3  {margin-left: 250px;}\n.bas4  {margin-left: 310px;}\n.bas2, .bas3, .bas4  {\n\tanimation: ball234 2.5s linear infinite;\n}\n@keyframes ball234  {\n0%   {transform:rotate(   0deg);}\n25%  {transform:rotate(-0.5deg);}\n25.5%{transform:rotate(   0deg);}\n51%  {transform:rotate(   0deg);}\n75%  {transform:rotate( 0.5deg);}\n75.5%{transform:rotate(   0deg);}\n100% {transform:rotate(   0deg);}\n}\n.bas5  {\n\tmargin-left: 370px;\n\ttransform: rotate(0deg);\n\tanimation: ball5 2.5s linear infinite;\n}\n@keyframes ball5  {\n0%  {transform:rotate(  0deg);}\n25% {transform:rotate(  0deg);}\n50% {transform:rotate(-25deg);}\n75% {transform:rotate(  0deg);}\n100%{transform:rotate(  0deg);}\n}\n.string, .string2  {\n\tmargin: 290px 0px 0px 42px;\n\twidth: 2px;\n\theight: 250px;\n\tbackground-color: #FF0000;\n\tposition: relative;\n\ttransform: rotateZ(5deg);\n\t-moz-transform: rotateZ(5deg);\n}\n.string2  {\n\tmargin: -250px 0px 0px 18px;\n\ttransform: rotateZ(-5deg); \n}\n.nc-ball  {\n\twidth: 55px;\n\theight: 55px;\n\tbackground-color: #000000;\n\tmargin-left: auto;\n\tborder-radius: 30px;\n\tposition: relative;\n\tmargin-right: auto;\n\t-webkit-box-shadow:0px 3px 5px 1px black;\n\t-moz-box-shadow: 0px 3px 5px 1px black;\n\tbox-shadow: 0px 3px 5px 1px black;\n\tbackground: rgb(245,246,246);\n\tbackground: -moz-radial-gradient(center, ellipse cover,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%);\n\tbackground: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); \n\tbackground: -webkit-radial-gradient(center, ellipse cover,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);\n\tbackground: -o-radial-gradient(center, ellipse cover,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);\n\tbackground: -ms-radial-gradient(center, ellipse cover,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);\n\tbackground: radial-gradient(ellipse at center,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); \n}\n\/* ========= CLOSE Ball & String ========== *\/\n\/* ========= Ball Shadows ========= *\/\n#shadows {\n\twidth: 570px;\n\theight: 430px;\n\tposition: absolute;\n\ttop: 0px\n}\n.shadow1, .shadow2, .shadow3, .shadow4, .shadow5  {\n\twidth: 35px;\n\theight: 35px;\n\tborder-radius: 25px;\n\tbox-shadow: 0 0 20px 20px #333333 inset, 0 0 55px 10px #000000;\n\topacity: 0.14;\n\ttransform: rotateX(-125deg);\n}\n.shadow1  {\n\ttop: 350px;\n\tleft: 40px;\n\tposition: absolute;\n\tanimation: shadow1 2.5s linear infinite;\n}\n.shadow234box  {\n\twidth: 180px;\n\theight: 35px;\n\ttop: 350px;\n\tleft: 515px;\n\tmargin-left:165px;\n\tposition: absolute;\n\tanimation: shadow234 2.5s linear infinite;\n}\n.shadow2, .shadow3, .shadow4  {\n\tposition: relative;\n\tfloat: left;\n\ttop: 0px;\n\tmargin-right: 25px;\n}\n.shadow5  {\n\ttop: 350px;\n\tleft: 385px;\n\tposition: absolute;\n\tanimation: shadow5 2.5s linear infinite;\n}\n@keyframes shadow1  {\n0%  {left: 40px;}\n25% {left:145px;}\n50% {left:145px;}\n75% {left:145px;}\n100%{left: 40px;}\n}\n@keyframes shadow234  {\n0%   {left: 40px;}\n25%  {left: 42px;}\n25.5%{left: 40px;}\n51%  {left: 40px;}\n75%  {left: 38px;}\n75.5%{left: 40px;}\n100% {left: 40px;}\n}\n@keyframes shadow5  {\n0%  {left:385px;}\n25% {left:385px;}\n50% {left:505px;}\n75% {left:385px;}\n100%{left:385px;}\n}\n\/* ========= CLOSE Ball & String ========== *\/\n\/* ===== Comment below clock  ===== *\/\n.my-comment {\n\tmargin: 1.3em auto 1.2em auto;\n\twidth: 80%;\n\tposition: relative;\n\tfont-size: 1.5em;\n\tcolor: #000;\n\ttext-align: center;\n\tline-height: 1.6em;\n        padding: 0;\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"box\"> <!-- ====== Cradle Components Container --><\/p>\n<div id=\"bas\">\n<div class=\"bas1\">\n<div class=\"string\"><\/div>\n<div class=\"string2\"><\/div>\n<div class=\"nc-ball\"><\/div>\n<\/p><\/div>\n<div class=\"bas2\">\n<div class=\"string\"><\/div>\n<div class=\"string2\"><\/div>\n<div class=\"nc-ball\"><\/div>\n<\/p><\/div>\n<div class=\"bas3\">\n<div class=\"string\"><\/div>\n<div class=\"string2\"><\/div>\n<div class=\"nc-ball\"><\/div>\n<\/p><\/div>\n<div class=\"bas4\">\n<div class=\"string\"><\/div>\n<div class=\"string2\"><\/div>\n<div class=\"nc-ball\"><\/div>\n<\/p><\/div>\n<div class=\"bas5\">\n<div class=\"string\"><\/div>\n<div class=\"string2\"><\/div>\n<div class=\"nc-ball\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- ==========CLOSE BAS (Ball & String) ======== --><\/p>\n<div id=\"frame\">\n<div class=\"frametop\"><\/div>\n<div class=\"frametop2\"><\/div>\n<div class=\"frameleg1\"><\/div>\n<div class=\"frameleg2\"><\/div>\n<div class=\"frameleg3\"><\/div>\n<div class=\"frameleg4\"><\/div>\n<\/p><\/div>\n<p> <!-- ==========CLOSE FRAME ======== --><\/p>\n<div id=\"shadows\">\n<div class=\"shadow1\"><\/div>\n<div class=\"shadow234box\">\n<div class=\"shadow2\"><\/div>\n<div class=\"shadow3\"><\/div>\n<div class=\"shadow4\"><\/div>\n<\/p><\/div>\n<p> <!-- CLOSE SHADOW234BOX --><\/p>\n<div class=\"shadow5\"><\/div>\n<\/p><\/div>\n<p> <!-- ==========CLOSE SHADOWS ======== -->\n\t<\/div>\n<p> <!-- CLOSE BOX --><\/p>\n<div class=\"my-comment\">Newton&#8217;s Cradle made with Pure CSS <\/div>\n<\/div>\n<p> <!-- .ani-box  --><\/p>\n<p class=\"below-ani\">\nThis is one of my favorite CSS animations. It is completely created with CSS and CSS keyframes. Unfortunately, it was created with fixed sizes (i.e. width:570px; and not a responsive format), which does not flow well with a responsive web page. However, with the CSS &#8220;scale&#8221; transform property it can fit &#8220;okay&#8221; in most pages with some media query tweaks.<br \/>\n<br \/>If you like it, leave a comment below&#8230; or Share it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Newton&#8217;s Cradle made with Pure CSS This is one of my favorite CSS animations. It is completely created with CSS and CSS keyframes. Unfortunately, it was created with fixed sizes (i.e. width:570px; and not a responsive format), which does not<\/p>\n","protected":false},"author":2,"featured_media":2595,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,28,16],"class_list":["post-136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-newtons-cradle","tag-pure-css"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/136","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=136"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/136\/revisions\/138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2595"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}