pelicin › web › CSS

Offset

Offset CSS properties are used to animate an element along a motion path.

Offset Properties

offset

Shorthand for offset-path, offset-distance, offset-rotate, offset-anchor.

div {
  /* <offset-path> <offset-distance> <offset-rotate> / <offset-anchor> */
  offset: url(arc.svg) 30deg / 50px 100px;
}

offset-path

Specifies a motion path for an element to follow. Possible values:

  • none — no motion path (default)
  • a basic shape — see basic shape data type
  • url(...) — e.g. url('resources.svg#path'); references the ID of an SVG shape that will be used as path (e.g. <circle id="..."> or <rect id="...">)

offset-distance

Specifies where at the offset-path the element should be placed.

Specify a length or a percentage. 0% means the element is placed at the beginning of the path, while 100% means the element is placed at the end of the path.

Illustration of offset-distance

offset-rotate

Defines how the element should rotate along offset-path

  • auto — rotate alongside the curvature of the path (default)
  • auto offset — e.g. auto 20deg; rotate alongside the curvature of the path, plus offset degree clockwise
  • reverse — like auto, but faces the opposite direction (equivalent to auto 180deg)
  • angle — e.g. 20deg; keep this constant angle while travelling along the path

offset-anchor

Specifies which point of the element is travelling along the offset-path.

Specify auto, a coordinate (in lengths/percentages, e.g. 20px 20px), or using the offset syntax (e.g. bottom 10px right 20px).

Illustration of offset-anchor

References