Paths
CSS Orbit Animation
An element circling a fixed centre.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.orbit {
transform: translate3d(208px, 128px, 0);
offset-path: path('M 0 0 m -100 0 a 100 100 0 1 0 200 0 a 100 100 0 1 0 -200 0');
offset-distance: 0%;
offset-rotate: 0deg;
width: 64px;
height: 64px;
background: #22d3ee;
border-radius: 999px;
animation: orbit-anim 3000ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes orbit-anim {
0% {
offset-distance: 0%;
offset-rotate: 0deg;
}
100% {
offset-distance: 100%;
offset-rotate: 0deg;
}
}
@media (prefers-reduced-motion: reduce) {
.orbit {
animation: none;
transition: none;
}
}Why it is built this way
A circular offset-path, which keeps the element upright as it travels. Rotating a container instead would carry the child around with it and spin it at the same time.
What it animates
1 property across 1 CSS declaration. The bar shows when each one is moving.
offset-distanceWhat it costs to run
Offset-distance is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 3.00s across 2 keyframe stops, with every property moving over the same window.
A single linear curve on a plain box. Linear looks wrong on almost anything that starts and stops — but it is exactly right here, because a continuous loop that eases would visibly stutter at the seam where it repeats.
Accessibility
Nothing here hides content — offset-distance moves over 3.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.