newtons-cradle – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:28:50 +0000 en-US hourly 1 Newton’s Cradle Pure CSS Animation https://thingography.com/css-newtons-cradle/ https://thingography.com/css-newtons-cradle/#respond Sun, 18 Feb 2018 21:56:45 +0000 http://thingography.com/my-things/?p=136 .ani-box { height: 530px;} /* ======= Newton's Cradle Box - ======== */ .box { width: 570px; height: auto; margin: 0 auto; padding: 0; position: relative; overflow: hidden; } @media screen and (max-width: 900px) { .box { transform:scale(0.8); transform-origin: top center; } } @media screen and (max-width: 720px) { .box { transform:scale(0.6); transform-origin: top center; } } @media screen and (max-width: 500px) { .box { transform:scale(0.4); transform-origin: top center; margin-left: -25%; } } @media screen and (max-width: 320px) { .box { transform:scale(0.3); transform-origin: top center; margin-left: -40%; } } @media screen and (max-width: 280px) { .box { transform:scale(0.2); transform-origin: top center; margin-left: -55%; } } /* ========= Cradle Frame ========= */ #frame { width: 570px; height: 430px; } .frametop, .frametop2, .frameleg1, .frameleg2, .frameleg3, .frameleg4 { width: 520px; height: 30px; top: 5px; left: 1px; position: absolute; border-radius: 5px; background: rgb(149,149,149); background: -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%); background: -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))); background: -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%); background: -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%); background: -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%); background: 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%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); } .frametop2 { width: 530px; height: 30px; top: 30px; left: 40px; z-index: 10; } .frameleg1, .frameleg2, .frameleg3, .frameleg4 { transform: rotateZ(90deg); } .frameleg1 { left: -155px; top: 208px; width: 380px; z-index: 1; } .frameleg2 { left: -120px; top: 215px; width: 400px; z-index: 6; } .frameleg3 { left: 300px; top: 208px; width: 380px; z-index: 1; } .frameleg4 { left: 335px; top: 215px; width: 400px; z-index: 6; } /* ========= Ball & String ========== */ #bas { width: 570px; height: 430px; position: absolute; top: 0px; left: 0px; } .bas1, .bas2, .bas3, .bas4, .bas5 { margin: -255px 0px 0px 60px; width: 60px; height: 600px; position: absolute; z-index: 5; } .bas1 { margin: -255px 0px 0px 130px; transform: rotate(25deg); animation: ball1 2.5s linear infinite; } @keyframes ball1 { 0% {transform:rotate(25deg);} 25% {transform:rotate( 0deg);} 50% {transform:rotate( 0deg);} 75% {transform:rotate( 0deg);} 100%{transform:rotate(25deg);} } .bas2 {margin-left: 190px;} .bas3 {margin-left: 250px;} .bas4 {margin-left: 310px;} .bas2, .bas3, .bas4 { animation: ball234 2.5s linear infinite; } @keyframes ball234 { 0% {transform:rotate( 0deg);} 25% {transform:rotate(-0.5deg);} 25.5%{transform:rotate( 0deg);} 51% {transform:rotate( 0deg);} 75% {transform:rotate( 0.5deg);} 75.5%{transform:rotate( 0deg);} 100% {transform:rotate( 0deg);} } .bas5 { margin-left: 370px; transform: rotate(0deg); animation: ball5 2.5s linear infinite; } @keyframes ball5 { 0% {transform:rotate( 0deg);} 25% {transform:rotate( 0deg);} 50% {transform:rotate(-25deg);} 75% {transform:rotate( 0deg);} 100%{transform:rotate( 0deg);} } .string, .string2 { margin: 290px 0px 0px 42px; width: 2px; height: 250px; background-color: #FF0000; position: relative; transform: rotateZ(5deg); -moz-transform: rotateZ(5deg); } .string2 { margin: -250px 0px 0px 18px; transform: rotateZ(-5deg); } .nc-ball { width: 55px; height: 55px; background-color: #000000; margin-left: auto; border-radius: 30px; position: relative; margin-right: auto; -webkit-box-shadow:0px 3px 5px 1px black; -moz-box-shadow: 0px 3px 5px 1px black; box-shadow: 0px 3px 5px 1px black; background: rgb(245,246,246); background: -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%); background: -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))); background: -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%); background: -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%); background: -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%); background: 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%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); } /* ========= CLOSE Ball & String ========== */ /* ========= Ball Shadows ========= */ #shadows { width: 570px; height: 430px; position: absolute; top: 0px } .shadow1, .shadow2, .shadow3, .shadow4, .shadow5 { width: 35px; height: 35px; border-radius: 25px; box-shadow: 0 0 20px 20px #333333 inset, 0 0 55px 10px #000000; opacity: 0.14; transform: rotateX(-125deg); } .shadow1 { top: 350px; left: 40px; position: absolute; animation: shadow1 2.5s linear infinite; } .shadow234box { width: 180px; height: 35px; top: 350px; left: 515px; margin-left:165px; position: absolute; animation: shadow234 2.5s linear infinite; } .shadow2, .shadow3, .shadow4 { position: relative; float: left; top: 0px; margin-right: 25px; } .shadow5 { top: 350px; left: 385px; position: absolute; animation: shadow5 2.5s linear infinite; } @keyframes shadow1 { 0% {left: 40px;} 25% {left:145px;} 50% {left:145px;} 75% {left:145px;} 100%{left: 40px;} } @keyframes shadow234 { 0% {left: 40px;} 25% {left: 42px;} 25.5%{left: 40px;} 51% {left: 40px;} 75% {left: 38px;} 75.5%{left: 40px;} 100% {left: 40px;} } @keyframes shadow5 { 0% {left:385px;} 25% {left:385px;} 50% {left:505px;} 75% {left:385px;} 100%{left:385px;} } /* ========= CLOSE Ball & String ========== */ /* ===== Comment below clock ===== */ .my-comment { margin: 1.3em auto 1.2em auto; width: 80%; position: relative; font-size: 1.5em; color: #000; text-align: center; line-height: 1.6em; padding: 0; }

Newton’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 flow well with a responsive web page. However, with the CSS “scale” transform property it can fit “okay” in most pages with some media query tweaks.

If you like it, leave a comment below… or Share it!

]]> https://thingography.com/css-newtons-cradle/feed/ 0