How to make a morph spinner animation using CSS ?
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" >w3wiki</ h1 > < h2 >Morph animation</ h2 > < div class = "spinner" ></ div > </ body > </ html > |
Output:
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" >w3wiki</ h1 > < h2 >Morph animation</ h2 > < div class = "spinner" ></ div > </ body > </ html > |
Output: