CSS Animation Example: The Morphing Square

The "Morphing Square" captures attention with a dynamic shape transformation, transitioning smoothly between a square and a circle.

This morphing effect is primarily driven by animating the border-radius property from 0% (a square) to 50% (a perfect circle). To make the loading state feel more active and complex, we concurrently animate the background-color and utilize transform: rotate() scale() to spin and shrink the shape as it morphs.

A key to this animation's fluidity is setting the animation's direction to alternate, meaning it plays forward to 100%, then effortlessly plays backward to 0%.

Here is the code to create the Morphing Square animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.morph-loader {
    width: 50px;
    height: 50px;
    background-color: #007bff;
    animation: morph 2s infinite ease-in-out alternate;
}

@keyframes morph {
    0% {
        border-radius: 0%;
        transform: rotate(0deg) scale(1);
        background-color: #007bff;
    }
    50% {
        border-radius: 50%;
        transform: rotate(180deg) scale(0.5);
        background-color: #28a745;
    }
    100% {
        border-radius: 0%;
        transform: rotate(360deg) scale(1);
        background-color: #17a2b8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .morph-loader {
        /* Disabling the animation but keeping the element visible */
        animation: none;
        border-radius: 5px; /* Subtle rounding for a static state */
    }
}
</style>

View Output

Accessibility Considerations

Shape-shifting, color-changing, rotating animations can be highly distressing for users sensitive to motion and rapid visual changes. We can utilize the prefers-reduced-motion media query to detect if the user has requested that their system minimize non-essential motion.

For these users, we should completely halt the animation, leaving a static, visible square that still functions as a placeholder indicating the system isn't broken.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .morph-loader {
        /* Disabling the animation but keeping the element visible */
        animation: none;
        border-radius: 5px; /* Subtle rounding for a static state */
    }
}