Balancing ball on the stick animation using only CSS

Last Updated : 29 Dec, 2022

Swinging ball balance on a bat is a basic CSS animation where the bat will move slightly back and forth direction in order to move the ball that will rotate in to-&-fro motion over the bat in an infinite loop. In this article, we will see how to create the swinging ball balance on bat animation using HTML & CSS.

Approach: The following approach will be utilized to create the swinging ball balance on bat animation, which is described below:

Create the bat element and ball as the child element of the bat.
We styled the body element with a black background and centered the elements.
The ball is styled with a position relative to the inner detail dot. We have kept the background of the ball as red, also, added the animation for an infinite time period, and with a smooth ease-in-out effect.
The ball::after is the pseudo-element maker for detailing the ball as it should not look like a solid circle that is moving in linear motion.
We have added the animation of balancing the ball with a smooth ease-in-out effect for an infinite time period.
Create the keyframes for timing the animation making the bat rotate 15 degree negative to 15 degree positive. And the ball with the calc function and rotate it to 360 degree from 0.

Example: This example illustrates the swinging ball balance on bat animation using CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            height: 70vh; 
            display: grid; 
            place-items: center; 
            background-color: black; 
            padding: auto; 
        } 
  
        .ball { 
            position: relative; 
            bottom: 50px; 
            left: calc(100% - 20px); 
            width: 50px; 
            height: 50px; 
            background: #fff; 
            border-radius: 50%; 
            animation: ball-move8234 3s ease-in-out 1s infinite alternate; 
        } 
  
        .ball::after { 
            position: absolute; 
            content: ''; 
            top: 25px; 
            right: 5px; 
            width: 5px; 
            height: 5px; 
            background: #000; 
            border-radius: 50%; 
        } 
  
        .bat { 
            width: 200px; 
            height: 12.5px; 
            background: #FFDAAF; 
            border-radius: 30px; 
            transform: rotate(-15deg); 
            animation: up-down6123 3s ease-in-out 1s infinite alternate; 
        } 
  
        @keyframes up-down6123 { 
            from { 
                transform: rotate(-15deg); 
            } 
  
            to { 
                transform: rotate(15deg); 
            } 
        } 
  
        @keyframes ball-move8234 { 
            from { 
                left: calc(100% - 40px); 
                transform: rotate(360deg); 
            } 
  
            to { 
                left: calc(0% - 20px); 
                transform: rotate(0deg); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks <br>  
        Ball swinging on bat animation 
    </h1> 
  
    <div class="bat"> 
        <div class="ball"></div> 
    </div> 
</body> 
  
</html>