Smooth transitions between different geometric shapes. Watch as circles transform into squares, triangles, and back again in an endless loop.
<div class="shape-morph"></div>.shape-morph {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #667eea, #764ba2);
animation: morphShape 4s ease-in-out infinite;
}
@keyframes morphShape {
0%, 100% {
border-radius: 50%;
transform: rotate(0deg);
}
25% {
border-radius: 0%;
transform: rotate(90deg);
}
50% {
border-radius: 50% 0 50% 0;
transform: rotate(180deg);
}
75% {
border-radius: 0% 50% 0% 50%;
transform: rotate(270deg);
}
}