offset

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die offset CSS Kurzschreibweiseigenschaft setzt alle erforderlichen Eigenschaften, um ein Element entlang eines definierten Pfades zu animieren. Die offset-Eigenschaften zusammen helfen, eine offset-Transformation zu definieren, eine Transformation, die einen Punkt in einem Element (offset-anchor) in Übereinstimmung mit einer offset-Position (offset-position) auf einem Pfad (offset-path) an verschiedenen Punkten entlang des Pfades (offset-distance) ausrichtet 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

Zusammengesetzte Eigenschaften

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

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Erstellt StapelkontextJa

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

Ein Element entlang eines Pfades animieren

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch