An Interest In:
Web News this Week
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To