offset
Quick Summary for offset
The
offset
CSS shorthand property sets all the properties required for animating an element along a defined path.
Code Usage for offset
/* 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: unset;
More Details for offset
offset
The offset
CSS shorthand property sets all the properties required for animating an element along a defined path.
Note: Early versions of the spec called this property motion
.
Constituent properties
This property is a shorthand for the following CSS properties:
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
Syntax
/* 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: unset;
Formal definition
Initial value | as each of the properties of the shorthand:offset-position : auto offset-path : none offset-distance : 0 offset-anchor : auto offset-rotate : auto |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | as each of the properties of the shorthand:offset-position : referToSizeOfContainingBlockoffset-distance : refer to the total path lengthoffset-anchor : relativeToWidthAndHeight |
Computed value | as each of the properties of the shorthand:offset-position : for <length> the absolute value, otherwise a percentageoffset-path : as specifiedoffset-distance : for <length> the absolute value, otherwise a percentageoffset-anchor : for <length> the absolute value, otherwise a percentageoffset-rotate : as specified |
Animation type | as each of the properties of the shorthand:offset-position : a positionoffset-path : as <angle>, <basic-shape> or <path()>offset-distance : a length, percentage or calc();offset-anchor : a positionoffset-rotate : as <angle>, <basic-shape> or <path()> |
Creates stacking context | yes |
Formal syntax
[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?
Examples
Animating an element along a path
HTML<div id="offsetElement"></div>
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; }
ResultSpecifications
Specification |
---|
Motion Path Module Level 1 # offset-shorthand |
See also
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語Português (do Brasil)中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline