CSS Motion Path

Intermediate

CSS Motion Path adds an offset transform that can position a transformable element on an author-defined path and optionally rotate it to follow that path. The current CSSWG Editor's Draft defines the offset shorthand and the offset-position, offset-path, offset-distance, offset-rotate, and offset-anchor longhands.

This lesson owns the Motion Path module's offset properties. The Transforms lesson owns the general transform model and coordinate-system behavior; Animations owns animation mechanics; Motion Path owns how an offset path, distance, anchor, and path-following rotation create the offset transform.

Define the path with offset-path

`offset-path` specifies the geometric path used by the offset transform. The current draft accepts `none`, a path such as `ray()`, a URL reference, or a basic shape, optionally combined with a coordinate box. With no offset path, the element has no offset transform.

?

Place the element with offset-distance

`offset-distance` selects a position along the offset path. It accepts a length or percentage; percentages are relative to the total length of the offset path. Its initial value is `0`, so changing it is the direct way to move an element along a defined path.

?

Control path-relative rotation with offset-rotate

`offset-rotate` adds rotation to the offset transform. `auto` follows the direction of the path, `reverse` follows it in the opposite direction, and an angle adds a fixed rotation component. This rotation is part of the offset transform; it is not a replacement for the general `transform` property.

?

Choose the element's anchor with offset-anchor

`offset-anchor` identifies which point of the element is attached to the offset position. The property accepts `auto` or a position. This matters when the element should travel by its center, edge, or another chosen point instead of the default anchor behavior.

?

Set the path's starting position with offset-position

`offset-position` supplies the starting position used by offset-path functions that need one. The current draft defines `normal`, `auto`, and a position value. It is separate from `offset-distance`: one establishes where the path starts, while the other selects a distance along the path.

Animate the distance instead of inventing a JavaScript loop

Because `offset-distance` is animatable, CSS Animations or Transitions can move an element along its path. The animation system remains responsible for timing and interpolation; Motion Path supplies the path-based geometry.

?

Use the offset shorthand when the longhands are understood

The `offset` shorthand sets the Motion Path longhands together. For learning and debugging, the longhands are often clearer because they expose path, distance, rotation, position, and anchor as separate responsibilities. Use the shorthand when its grammar remains readable for the team.

?

Keep Motion Path separate from layout and general transforms

Motion Path does not become a replacement for normal layout. Flexbox, Grid, Flow, and Positioning still determine layout according to their own modules. Motion Path adds an offset transform to a transformable element. General Transforms still owns the broader transform rendering model, while Animations and Transitions own their timing mechanisms.

Summary