Learn how to implement morphing using CSS, a technique for transforming one appearance into another.
What is morphing?
Morphing is a technique where you transform one appearance into another. It’s a shape-shifting animation where a two-dimensional object, say an image or a figure or similar, turns into a different shape.
In this article for simplicity, we create a div that alternates between a square and a circle.
Define a div element with spinner class. Give the spinner basic demotions and animate it with a custom animation named Morph that takes 2 seconds and runs forever.
.spinner {
width: 100px;
height: 100px;
animation: Morph 2000ms infinite;
}
To make the element change its shape we need to define a custom animation named Morph. When the Morph animation is in 0 and 100 present, we set the border radius to 50% so the element shapes like a circle, and we set the border-radius to 0 when the animation is at 50% so it changes back to square.
Next, let’s rotate the element and change its color during shape-shifting to give it a nice look. To do that we need to set the background color for each step and add a transform property that rotates the element between 0 and 180 degrees during animation steps.
@keyframes Morph {
0%, 100% {
border-radius: 50%;
transform: rotate(0deg);
background-color: pink;
}
50% {
border-radius: 0%;
transform: rotate(180deg);
background-color: lightblue;
}
}
Finally, our morphing animation works and you can see and play with the final code at nexuscode.online
Amir-Lotfi | Sciencx (2022-06-26T06:17:36+00:00) Creating Morphing Animations with CSS. Retrieved from https://www.scien.cx/2022/06/26/creating-morphing-animations-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.