Effects
Border Radius Morph
Melts between a square and a circle while turning.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.morph {
transform: translate3d(180px, 100px, 0);
width: 120px;
height: 120px;
background: #6366f1;
border-radius: 20px;
animation: morph-anim 2000ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes morph-anim {
0% {
transform: translate3d(180px, 100px, 0);
border-radius: 12px;
animation-timing-function: ease-in-out;
}
50% {
transform: translate3d(180px, 100px, 0) rotate(180deg);
border-radius: 999px;
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(180px, 100px, 0) rotate(360deg);
border-radius: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.morph {
animation: none;
transition: none;
}
}Why it is built this way
border-radius is one of the few non-composited properties worth animating: it repaints but does not reflow. Combined with rotation it gives the blob motion normally reached for with SVG.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
border-radiustransformWhat it costs to run
Mixed: rotate runs on the compositor while border-radius repaints. The compositor half is nearly free; the painted half is what to watch if you scale the element up or run several at once.
It runs for 2.00s across 6 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a plain box. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — border-radius and rotate move over 2.00s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.