.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;
}
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!
]]>