The offset-path property in CSS defines a movement path for an element to follow during animation.
The offset-path property in CSS defines a movement path for an element to follow during animation.
This property began life as motion-path. This, and all other related motion-* properties, are being renamed offset-* in the spec. We’re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes.
Here’s an example using the SVG path syntax:
.thing-that-moves {
/* "Old" syntax. Available in Blink browsers as of ~October 2015 */
CSS Animation vs Lottie: Which Should You Use in 2025?
An open-source CSS animation library with a live preview grid, creator suite, and community submissions
Position tooltips and popovers with native CSS — zero runtime JS
I built a motion library where the site becomes the preview
How CSS clamp() works (and a free generator that does the math for you)
CSS ellipsis is great. Until the string itself matters.
Animated Icons for Web Apps — The Complete 2025 Guide
A practical comparison of CSS animations and Lottie JSON animations. Learn when to use each and how to pick the right tool.
Every view-transition-name on a page must be unique. The problem is that every pseudo-element selector in your CSS targets a…
For years, developers have been hacking around the limitations of `border-radius`, using clip-path, SVG masks, and fragile…
CSS scroll-driven animations let you create silky-smooth scroll effects — progress bars, reveal animations, parallax — using pure…
The rotate() function spins an element either clockwise or counterclockwise in a 2D plane.
CSS relative colour values are now widely supported. In this article, pioneering author and web designer [Andy…
