Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 26, 2022 06:17 am GMT

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. Its 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


Original Link: https://dev.to/amirlotfi/creating-morphing-animations-with-css-g0g

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To