offset-position
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The offset-position
CSS property defines the initial position of the offset-path
.
Syntax
css
/* Keyword values */
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;
/* <percentage> values */
offset-position: 25% 75%;
/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;
/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;
/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;
Values
auto
-
The initial position is the position of the box specified by the
position
property. <position>
-
A
<position>
. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to becenter
. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). For more explanation of these value types, seebackground-position
.
Formal definition
Initial value | auto |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of containing block |
Computed value | for <length> the absolute value, otherwise a percentage |
Animation type | a position |
Formal syntax
offset-position =
auto |
<position>
<position> =
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<length-percentage> =
<length> |
<percentage>
Examples
Setting initial offset position
html
<div id="motion-demo"></div>
css
#motion-demo {
offset-path: path("M20,20 C20,100 200,0 200,100");
offset-position: left top;
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
background: cyan;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
Specifications
Specification |
---|
Motion Path Module Level 1 # offset-position-property |
Browser compatibility
BCD tables only load in the browser