← All motion patterns
Shine border
SubscriptionA light travelling once around a card's border every four seconds.
A conic gradient is rotated through a registered @property angle — which is what lets the browser interpolate an angle at all rather than snapping between keyframes — and then masked to the border ring with a composite exclusion, so only the one-and-a-half-pixel edge is ever painted. Because the gradient is transparent everywhere except a 16% arc, the result reads as a single light going round rather than a spinning wheel. Under reduced motion the animation stops and the border falls back to a flat rule at 40% of the accent.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
See plans