Creating Morphing Animations with CSS

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