# Creating Morphing Animations with CSS

**Published by:** [float](https://paragraph.com/@floatbit/)
**Published on:** 2022-06-26
**URL:** https://paragraph.com/@floatbit/creating-morphing-animations-with-css

## Content

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. 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. Finally, our morphing animation works and you can see and play with the final code at nexuscode.online

## Publication Information

- [float](https://paragraph.com/@floatbit/): Publication homepage
- [All Posts](https://paragraph.com/@floatbit/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@floatbit): Subscribe to updates