Multiple Pendulum Animation using CSS

Last Updated : 28 Mar, 2023

In this article, we will see the creation of the Multiple Pendulum Animation using HTML & CSS. To accomplish this task, we will use two elements, i.e. for creating the shadow and knob for the Pendulum, we will use CSS :after and :before selectors. We will follow the below approach to create the Multiple Pendulum Animation.

Approach:

First, create an HTML snippet for creating the structure of the pendulum.
As pendulum elements, create two elements one div element with the pendulum-base class name, and within the pendulum-base, create multiple pendulum elements. Here we’re creating 15 pendulums inside my pendulum-base class. Now, start applying CSS for animation.
Apply global CSS with the help of the * selector so that everything works correctly.
Apply styling to the pendulum-base class. For that, we can create a large plain rectangle width of 500px and height of 300px and give a border-top of 3px to the rectangle, so that it looks like the base of the pendulum structure.
Now add CSS for the pendulums. For that, we’re applying one common CSS to all pendulums elements, for that, we can apply CSS for separate pendulums with the help of :nth-of-type.
For creating the knob, we use :before selector with a width of 15px and height of 15px with background: radial-gradient(circle at 70% 35%, white, #66d63e 30%, #40a31d 50%) to create a sphere and its realistic color.
For adding the shadow, we will use :after selector with background: rgba(0, 0, 0, 0.3) and filter: blur(5px) which makes it looks like a shadow.
Now, creates an animation that is responsible for the pendulum swinging back and forth. It rotates the thread element around its midpoint using the transform property.
At the start and end of the animation (0% and 100%), the element is rotated 25 degrees to the right and translated horizontally to the left by 50% of its own width using the transform property.
At the halfway point of the animation (50%), the element is rotated 25 degrees to the left and translated horizontally to the left by 50% of its own width.

Example: This example illustrates the Multiple Pendulum Animation using HTML & CSS.

HTML

<!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>

Output:

Multiple pendulums

Suggest improvement

Critical Rendering Path Flow

Self Balancing BST in JavaScript

Share your thoughts in the comments

Multiple Pendulum Animation using CSS

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?