offset-path with shapes (motion path)

Baseline 2024 für `offset-path` mit Basic Shapes und coord-box (Chrome 116, Safari 16, Firefox 122). `shape()` in offset-path ist Baseline 2026 (fx-033).

Chrome 116Edge 116Safari 16Firefox 122

Bewegt ein Element entlang eines Pfads (Kreis, Inset, Polygon, SVG-Pfad oder `shape()`) und dreht es automatisch in Bewegungsrichtung. Orbit- und Fortschritt-entlang-Strecke-Effekte ohne JS.

CSS

.fx-021 {
  position: relative;
  width: 160px;
  height: 160px;
  border: 2px dashed #bbb;
  border-radius: 50%
}
.fx-021 span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #2563eb;
  border-radius: 4px 4px 12px 4px;
    offset-path: circle(50% at 50% 50%);
  offset-rotate: auto;
  animation: fx-021-orbit 4s linear infinite
}
@keyframes fx-021-orbit {
  to {
    offset-distance: 100%
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-021, .fx-021 * { animation: none; transition: none; }
}

HTML

<div class="fx-021"><span></span></div>

Fallback: Browser ohne Unterstützung lassen das Element statisch an seiner normalen Position.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/offset-path

Prompt

Animiere entlang einer Strecke mit Motion Path: setze `offset-path` auf eine Basic Shape (`circle()`, `inset()`, `polygon()`, `path()` oder `shape()`), behalte `offset-rotate: auto`, damit das Element entlang des Pfads ausgerichtet wird, und animiere `offset-distance` von 0% auf 100%. Berechne keine Positionen in JavaScript.