<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Multiple Pendulum Animation using CSS
</
title
>
<
style
>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pendulum-base {
width: 500px;
height: 300px;
margin: auto;
border-top: 3px solid #66d63e;
}
.pendulum {
position: absolute;
right: 50%;
transform: translate(-50%) rotate(20deg);
width: 2px;
height: 150px;
background: #b5ff9a;
animation: moveIt 1.5s ease-in-out infinite;
transform-origin: 50% 0;
}
.pendulum:nth-of-type(2) {
height: 160px;
animation-duration: 1.52s;
}
.pendulum:nth-of-type(3) {
height: 170px;
animation-duration: 1.54s;
}
.pendulum:nth-of-type(4) {
height: 180px;
animation-duration: 1.56s;
}
.pendulum:nth-of-type(5) {
height: 190px;
animation-duration: 1.58s;
}
.pendulum:nth-of-type(6) {
height: 200px;
animation-duration: 1.6s;
}
.pendulum:nth-of-type(7) {
height: 210px;
animation-duration: 1.62s;
}
.pendulum:nth-of-type(8) {
height: 220px;
animation-duration: 1.64s;
}
.pendulum:nth-of-type(9) {
height: 230px;
animation-duration: 1.66s;
}
.pendulum:nth-of-type(10) {
animation-duration: 1.68s;
height: 240px;
}
.pendulum:nth-of-type(11) {
animation-duration: 1.7s;
height: 250px;
}
.pendulum:nth-of-type(12) {
height: 260px;
animation-duration: 1.72s;
}
.pendulum:nth-of-type(13) {
height: 270px;
animation-duration: 1.74s;
}
.pendulum:nth-of-type(14) {
height: 280px;
animation-duration: 1.76s;
}
.pendulum:nth-of-type(15) {
height: 290px;
animation-duration: 1.78s;
}
@keyframes moveIt {
0%,
100% {
transform: translate(-50%) rotate(25deg);
}
50% {
transform: translate(-50%) rotate(-25deg);
}
}
.pendulum:before {
content: "";
position: absolute;
border-radius: 50%;
transform: translate(-50%);
left: 50%;
top: 100%;
width: 15px;
height: 15px;
background:
radial-gradient(circle at 70% 35%,
white, #66d63e 30%, #40a31d 50%);
}
.pendulum:after {
content: "";
position: absolute;
left: 50%;
transform: translate(-50%);
top: 115%;
border-radius: 50%;
filter: blur(5px);
width: 25px;
height: 3px;
background: rgba(0, 0, 0, 0.3);
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"pendulum-base"
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
<
div
class
=
"pendulum"
></
div
>
</
div
>
</
body
>
</
html
>