# CSS Motion Path

CSS Motion Path allows you to animate elements along a custom path (like a curve, circle, or complex SVG shape). This was previously only possible with SVG animations (SMIL) or JavaScript.

## 1. The Properties

The Motion Path module consists of several properties, usually prefixed with `offset-`.

### `offset-path`
Defines the path the element should follow. It accepts the same path syntax as SVG paths or CSS shapes.

```css
.element {
  offset-path: path('M20,20 C20,100 200,0 200,100');
}
```

### `offset-distance`
Specifies the position of the element along the path. This is the property you animate.

*   `0%`: Start of the path.
*   `100%`: End of the path.

```css
@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.element {
  animation: move 3s linear infinite;
}
```

### `offset-rotate`
Defines the orientation of the element as it moves along the path.

*   `auto` (Default): The element rotates to follow the direction of the path.
*   `auto 180deg`: Follows the path but rotated by 180 degrees.
*   `0deg`: Fixed rotation (does not rotate with the path).

```css
.element {
  offset-rotate: auto 90deg; /* Like a car drifting sideways */
}
```

### `offset-anchor`
Specifies the point on the element that is fixed to the path. Similar to `transform-origin`.

*   `auto` (Default): Uses the value of `transform-origin`.
*   `center`, `top left`, etc.

## 2. Basic Example

```css
.car {
  width: 40px;
  height: 20px;
  background: red;
  
  /* Define the path */
  offset-path: path('M 10 10 H 280 V 280 H 10 Z');
  
  /* Animate along the path */
  animation: drive 4s linear infinite;
}
```

[[programming/css/css]]
[[programming/css/transitions-and-animations]]
[[programming/css/css-shapes]]