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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...