How to make a morph spinner animation using CSS ?

Last Updated : 16 Dec, 2022

Morphing is the rotating animation of certain objects changing their shape. The changing of shape is called morphing.

In this article, we will make a morph spinner that will act as a loading animation by using CSS.

This method can also be used to make eye-catching card backgrounds, banners, buttons, and demo purposes of certain functions on the website. We will create a square div with a class “spinner” and give it a specific height and width. We will add the keyframe animations to animate at our desired pace and direction.

Approach:

Create an HTML file.
Create a div with the class “spinner”.
Add animation to that spinner with infinite loop time and suitable duration according to the animation style.
Using keyframes, animate the shape of the object and color of the object according to your desired preference.
Make two break points, one at 0%, 100%, and another at 50% to change the shape of the object.
The more the breakpoints are smoother, the transition between the shapes will be smoother.

Example 1: The following code demonstrates the Circle to Square Morph animation.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" /> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0" /> 
    <title>GFG</title> 
  
    <style> 
        /* for centering the div */ 
        body { 
            display: grid; 
            place-items: center; 
        } 
        
        /* div properties */ 
       .spinner { 
            margin-top: 50px; 
            width: 100px; 
            height: 100px; 
            animation: Morph 2000ms infinite; 
        } 
        
        /* keyframe animation */ 
  
        @keyframes Morph { 
            0%, 
            100% { 
                border-radius: 50%; 
                transform: rotate(0deg); 
                background-color: rgb(255, 230, 0); 
            } 
  
            50% { 
                border-radius: 0%; 
                transform: rotate(180deg); 
                background-color: rgb(0, 130, 0); 
            } 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h2>Morph animation</h2> 
    <div class="spinner"></div> 
</body> 
</html> 

Output:

Awesome animation

Example 2: The following code demonstrates the Triangle to Diamond Morph animation. We have a yellow triangle that transitions into a red diamond and runs within an infinite loop, the size of the diamond is 100×100 pixels, and is animated using the CSS border-radius property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0" /> 
    <title>GFG</title> 
  
    <style> 
        /* for centering the div */ 
        body { 
            display: grid; 
            place-items: center; 
        } 
        
        /*  div properties  */ 
  
        .spinner { 
            width: 100px; 
            height: 100px; 
            animation: Morph 3500ms infinite; 
        } 
        
        /* keyframe animation */ 
  
        @keyframes Morph { 
            0%, 
            100% { 
                clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
                transform: rotate(0deg); 
                background-color: rgb(255, 0, 0); 
            } 
  
            50% { 
                clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%); 
                transform: rotate(180deg); 
                background-color: rgb(255, 238, 0); 
            } 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h2>Morph animation</h2> 
    <div class="spinner"></div> 
</body> 
</html> 