offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Die offset CSS-Kurzschreibweise setzt alle erforderlichen Eigenschaften fest, um ein Element entlang eines definierten Pfads zu animieren. Die Offset-Eigenschaften helfen dabei, eine Offset-Transformation zu definieren, eine Transformation, die einen Punkt in einem Element (offset-anchor) an eine Offset-Position (offset-position) auf einem Pfad (offset-path) ausrichtet, und zwar an verschiedenen Punkten entlang des Pfades (offset-distance) und optional das Element dreht (offset-rotate), um der Richtung des Pfades zu folgen.

Hinweis: Frühere Versionen der Spezifikation nannten diese Eigenschaft motion.

Probieren Sie es aus

offset: path("M 20 60 L 120 60 L 70 10 L 20 60") 0% auto 90deg;

offset: path( "M 20 210 L 74 210 L 118 140 \ L 62 140 L 20 210" ) 20% auto;

<section class="default-example" id="default-example"> <div class="wrapper"> <div id="example-element"></div> </div> <button id="playback" type="button">Play</button> </section>

#example-element { width: 24px; height: 24px; background: #2bc4a2; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: distance 3000ms infinite normal ease-in-out; animation-play-state: paused; } #example-element.running { animation-play-state: running; } .wrapper { height: 220px; width: 200px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 140" width="200" height="140"><path d="M 0 60 L 100 60 L 50 10 L 0 60" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>') no-repeat, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -140 150 230" width="200" height="230"><path d="M 0 70 L 56 70 L 98 0 L 42 0 L 0 70" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>'); } @keyframes distance { to { offset-distance: 100%; } } #playback { position: absolute; top: 0; left: 0; font-size: 1em; }

window.addEventListener("load", () => { const example = document.getElementById("example-element"); const button = document.getElementById("playback"); button.addEventListener("click", () => { if (example.classList.contains("running")) { example.classList.remove("running"); button.textContent = "Play"; } else { example.classList.add("running"); button.textContent = "Pause"; } }); });

Bestandteile

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css

/* Offset position */ offset: auto; offset: 10px 30px; offset: none; /* Offset path */ offset: ray(45deg closest-side); offset: path("M 100 100 L 300 100 L 200 300 z"); offset: url(arc.svg); /* Offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* Including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; /* Global values */ offset: inherit; offset: initial; offset: revert; offset: revert-layer; offset: unset;

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `offset-position`: `normal` `offset-path`: `none` `offset-distance`: `0` `offset-anchor`: `auto` `offset-rotate`: `auto`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `offset-position`: refer to the size of containing block `offset-distance`: beziehen sich auf die Gesamtlänge des Pfads `offset-anchor`: relative to the width and the height of the element's reference box
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `offset-position`: for `<length>` the absolute value, otherwise a percentage `offset-path`: wie angegeben `offset-distance`: for `<length>` the absolute value, otherwise a percentage `offset-anchor`: for `<length>` the absolute value, otherwise a percentage `offset-rotate`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `offset-position`: Position `offset-path`: by computed value type `offset-distance`: Längenangabe, Prozentsatz oder `calc()`; `offset-anchor`: Position `offset-rotate`: als <angle>, <basic-shape> oder <path()>
Erstellt Stapelkontext	Ja

Formale Syntax

offset = 
 [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]? 

<offset-position> = 
 normal |
 auto |
 <position> 

<offset-path> = 
 none |
 <offset-path> || <coord-box> 

<offset-distance> = 
 <length-percentage> 

<offset-rotate> = 
 [ auto | reverse ] ||
 <angle> 

<offset-anchor> = 
 auto |
 <position> 

<position> = 
 [ left | center | right | top | bottom | <length-percentage> ] |
 [ left | center | right ] && [ top | center | bottom ] |
 [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
 [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] 

<offset-path> = 
 <ray()> |
 <url> |
 <basic-shape> 

<coord-box> = 
 <paint-box> |
 view-box 

<length-percentage> = 
 <length> |
 <percentage> 

<ray()> = 
 ray( <angle> &&
 <ray-size>? &&
 contain? &&
 [ at <position> ]? ) 

<url> = 
 <url()> |
 <src()> 

<paint-box> = 
 <visual-box> |
 fill-box |
 stroke-box 

<ray-size> = 
 closest-side |
 closest-corner |
 farthest-side |
 farthest-corner |
 sides 

<url()> = 
 url( <string> <url-modifier>* ) |
 <url-token> 

<src()> = 
 src( <string> <url-modifier>* ) 

<visual-box> = 
 content-box |
 padding-box |
 border-box

Beispiele

Animation eines Elements entlang eines Pfades

HTML

html

<div id="offsetElement"></div>

CSS

css

@keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetElement { width: 50px; height: 50px; background-color: blue; offset: path("M 100 100 L 300 100 L 200 300 z") auto; animation: move 3s linear infinite; }

Ergebnis

Spezifikationen

Specification
Motion Path Module Level 1 # offset-shorthand