Motion Path Module Level 1

1. Introduction

This section is not normative.

The transform property and its related properties allow a box to be arbitrarily repositioned (and rotated, scaled, etc) relative to its laid out position, without disrupting the layout of any other elements on the page. These positions can be animated or transitioned with CSS, but only in relatively simple ways: moving a box in a straight line from its starting position to its ending position.

This specification introduces the offset function, which takes a number of functions introducing paths through space, and a distance to travel along that path, and transforms (and possibly rotates) the element to match that point along the path.

This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the ray() function) rather than the standard rectangular coordinates used by the translate() function.

It also allows an element to be animated along the defined path, making it easy to define complex and beautiful 2d spatial transitions.

For example, the following picture shows a curving path (indicated with dotted lines), and an airplane graphic positioned at various points along the path. The plane faces in the direction of the path at each position on the path.

The plane is shown at different offset-distance values: 0%, 50%, and 100%.

1.1. Module interactions

This specification defines additional types of transforms (see [css-transforms-1]) that can be applied to an element.

As described in CSS Transforms 2 § 6 Current Transformation Matrix, the transforms defined by this document are layered after the individual transform properties (defined in [css-transforms-2]) and before the transform property (defined in [css-transforms-1]).

1.2. Values

This specification follows the CSS property definition conventions from [CSS21]. The <basic-shape> type is defined in CSS Shapes Module Level 1 [CSS-SHAPES]. The <coord-box> tpe is defined in CSS Box Model Module Level 3 [CSS-BOX-3]. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [CSS3VAL].

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as initial and inherit as their property value [CSS3VAL]. For readability it has not been repeated explicitly.

2. Motion Paths

The properties in this specification allow defining an offset transform according to a distance (from offset-distance) along a path (from offset-path) starting at a particular point in the parent box (from offset-position), putting a particular point of the transformed element (the anchor point, from offset-anchor) at the defined spot and possibly rotating the transformed element to match the path’s direction at that point (from offset-rotate).

2.1. Defining A Path: The offset-path property

Specifies the offset path, a geometrical path the box gets positioned on, the initial position (where on the offset path the element is positioned at offset-distance: 0%), and the initial direction (the initial orientation of the box (per offset-rotate) at the initial position).

Values have the following meanings:

<ray()>

The offset path is a line extending from the initial position

<basic-shape> && <coord-box>?

The offset path is a basic shape as specified in CSS Shapes [CSS-SHAPES].

offset-position is ignored for circle and ellipse basic shapes with explicit center positions, and for other types of basic shapes. If a circle or ellipse basic shape has no explicit center position, the shape is centered at the initial position of the path, as described in offset-position.

The initial position for basic shapes are defined as follows:

<path()>

The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1 [SVG11].

<circle()>

<ellipse()>

The initial position is defined by the point where a horizontal tangent to the circle/ellipse would reach the top vertical position.

<inset()>

The initial position is the left end of the top horizontal line, immediately to the right of any border-radius arc.

<polygon()>

The initial position is defined by the first coordinate pair of the polygon.

The initial direction is defined by the vector connecting.

the initial position with the next following coordinate pair that isn’t equal to the initial position.

The <coord-box> specified in combination with a <basic-shape> provides the reference box for the <basic-shape>. If no reference box is specified, it defaults to border-box.

Apart from polygons with non-zero length, the initial direction is 90 degrees (i.e. to the right).

Note: This gives 0deg rotation when offset-rotate is auto.

<coord-box>

The offset path is the specified edge of the box, including the effect of any border-radius.

The initial position is the left end of the top horizontal line, immediately to the right of any border-radius arc, and the initial direction is to the right.

<url>

References an SVG shape element and uses its geometry as offset path. See SVG 1.1 for more information about the initial position and initial direction [SVG11].

none

No offset path gets created. When offset-path is none, offset-distance and offset-rotate have no effect.

A computed value of other than none results in the creation of a stacking context [CSS21] and containing block, per usual for transforms.

A reference that fails to download, is not a reference to an SVG shape element, or is non-existent, is treated as equivalent to path("m 0 0").

Note: This is a zero length path with directionality aligned with the positive x-axis.

See the section “Calculating the path transform” for how to use the offset path to compute the transform.

2.1.1. The ray() Function

The ray() function defines an offset path as a straight line emerging from a point at some defined angle:

ray() = ray( <angle> && <ray-size> && contain? )

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

Its arguments are:

<angle>

The offset path is a line segment that starts from the initial position and proceeds in the direction defined by the specified <angle>. As with gradient functions, <angle> values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation.

This is also the initial direction.

<ray-size>

Specifies the length of the offset path (the distance between the offset-distance: 0% and offset-distance: 100% points) relative to the containing box.

Note: For sides, the distance depends on the <angle> specified; for all other values, the distance is constant regardless of the <angle>.

Individual keywords are:

closest-side

The distance from the initial position to whichever side of the containing block is closest.

closest-corner

The distance from the initial position to whichever corner of the containing block is closest.

farthest-side

The distance from the initial position to whichever side of the containing block is farthest.

farthest-corner

The distance from the initial position to whichever corner of the containing block is farthest.

sides

The distance from the initial position to the point where the offset path intersects the containing block’s boundary.

If the initial position is on the containing block’s boundary, or outside its bounds entirely, the distance is zero.

Note: For closest-side and closest-corner, if the initial position is on an edge/corner, that’s the closest one. (In other words, the distance is zero.)

Note: For closest-side and farthest-side, if the initial position is outside the containing block entirely, the edges of the containing block are considered to extend out to infinity.

contain

The used value of offset-distance is clamped so that the box is entirely contained within the path.

If no offset-distance would lead to the box being enclosed by the path, the path size is minimally increased so that such an offset-distance exists.

Not clear what this actually means. See Issue 363.

Here are some examples. The first example shows that some parts of boxes are outside of the offset path.

<style>
    body {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
    }
    .box {
        width: 50px;
        height: 50px;
        offset-position: 50% 50%;
        offset-distance: 100%;
        offset-rotate: 0deg;
    }
    #redBox {
        background-color: red;
        offset-path: ray(45deg closest-side);
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(180deg closest-side);
    }
</style>
<body>
    <div class="box" id="redBox"></div>
    <div class="box" id="blueBox"></div>
</body>

In the second example, contain is given to the offset-path value of each box to avoid overflowing.

<style>
    body {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
    }
    .box {
        width: 50px;
        height: 50px;
        offset-position: 50% 50%;
        offset-distance: 100%;
        offset-rotate: 0deg;
    }
    #redBox {
        background-color: red;
        offset-path: ray(45deg closest-side contain);
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(180deg closest-side contain);
    }
</style>
<body>
    <div class="box" id="redBox"></div>
    <div class="box" id="blueBox"></div>
</body>

In the third example, the path size is increased so that the box can be contained. The used offset distance is negative.

<style>
    body {
        transform-style: preserve-3d;
        width: 250px;
        height: 250px;
    }
    .box {
        width: 60%;
        height: 10%;

        offset-position: 20% 20%;
        offset-distance: 0%;
        offset-rotate: 0deg;
        offset-anchor: 200% -300%;
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(-90deg closest-side contain);
    }
</style>
<body>
    <div class="box" id="blueBox"></div>
</body>

In the fourth example, the initial position is outside the containing block.

<style>
    #container {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
    }
    .box {
        width: 20%;
        height: 20%;
        offset-position: 140% 70%;
        offset-distance: 100%;
    }
    #redBox {
        background-color: red;
        offset-path: ray(-90deg sides);
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(180deg closest-side);
    }
</style>
<div id="container">
    <div class="box" id="redBox"></div>
    <div class="box" id="blueBox"></div>
</div>

2.1.2. Examples Of <basic-shape> Positioning

This example uses a circle with implicit center position.

<style>
    body {
        width: 323px;
        height: 131px;
        margin: 0px;
        border: 2px solid black;
        padding: 8px;
        transform-style: preserve-3d;
    }
    .item {
        width:  90px;
        height: 40px;
        background-color: violet;
    }
    #middle {
        offset-position: auto;
        offset-path: circle(60%) margin-box;
        offset-distance: 25%;
        offset-anchor: left top;
    }
</style>
<body>
    <div class="item"></div>
    <div class="item" id="middle"></div>
    <div class="item"></div>
</body>

2.1.3. Examples of <coord-box> Positioning

This example shows how <coord-box> offset path works in combination with border-radius.

<style>
    body {
        width: 500px;
        height: 300px;
        border-radius: 80px;
        border: dashed aqua;
        margin: 0;
    }
    #blueBox {
        width: 40px;
        height: 20px;
        background-color: blue;
        offset-path: margin-box;
    }
</style>
<body>
    <div id="blueBox"></div>
</body>

2.2. Position on the path: The offset-distance property

Specifies the position of the box as a distance along the offset path.

<length-percentage>

Specifies the distance from the initial position of the offset path to the position of the box’s anchor point.

Percentages are relative to the length of the offset path-- that is, the distance between the initial position and the end position of the offset path.

2.2.1. Calculating the computed distance along a path

Processing the distance along an offset path operates differently depending upon the nature of the offset path:

• References to <angle> offset paths with contain are unclosed intervals.

• References to <angle> offset paths without contain are unbounded rays.

• All basic CSS shapes are closed loops.

• Offset paths (including references to SVG Paths) are closed loops only if the final command in the path list is a closepath command ("z" or "Z"), otherwise they are unclosed intervals.

• References to SVG circles, ellipses, images, polygons and rects are closed loops.

• References to SVG lines and polylines are unclosed intervals.

To determine the used offset distance for a given offset path and offset distance:

1. Let the total length be the total length of offset path with all sub-paths.

2. Convert offset distance to pixels, with 100% being converted to total length.

3. If offset path is an unbounded ray:

   Let used offset distance be equal to offset distance.

   Otherwise if offset path is an <angle> path with contain:

   Let used offset distance be equal to offset distance, clamped so that the box lies entirely within the path.

   If offset path is any other unclosed interval:

   Let used offset distance be equal to offset distance clamped by 0 and the total length of the path.

   Otherwise offset path is a closed loop:

   Let used offset distance be equal to offset distance modulo the total length of the path. If the total length of the path is 0, used offset distance is also 0.

   Note: “Modulo” here uses the traditional mathematical definition, where the output is always non-negative.

This example shows boxes placed along an unclosed interval.

<style>
    .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 0 0 h 200 v 150');
    }
    #box1 {
        background-color: red;
        offset-distance: -280%;
    }
    #box2 {
        background-color: green;
        offset-distance: 190%;
    }
</style>
<body>
    <div class="item" id="box1"></div>
    <div class="item" id="box2"></div>
</body>

This example shows boxes placed along a closed interval.

<style>
    .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 0 0 h 200 v 150 z');
    }
    #box1 {
        background-color: red;
        offset-distance: -280%;
    }
    #box2 {
        background-color: green;
        offset-distance: 190%;
    }
</style>
<body>
    <div class="item" id="box1"></div>
    <div class="item" id="box2"></div>
</body>

This example shows a way to align boxes within the polar coordinate system using offset-path, offset-distance.

<style>
    body {
        transform-style: preserve-3d;
        width: 300px;
        height: 300px;
        border: dashed gray;
        border-radius: 50%;
    }
    .circleBox {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        background-color: red;
        border-radius: 50%;
    }
    #circle1 {
        offset-path: ray(0deg farthest-side);
        offset-distance: 50%;
    }
    #circle2 {
        offset-path: ray(90deg farthest-side);
        offset-distance: 20%;
    }
    #circle3 {
        offset-path: ray(225deg farthest-side);
        offset-distance: 100%;
    }
</style>
<body>
    <div class="circleBox" id="circle1"></div>
    <div class="circleBox" id="circle2"></div>
    <div class="circleBox" id="circle3"></div>
</body>

2.3. Define the starting point of the path: The offset-position property

Specifies the initial position of the offset path. If position is specified with static, offset-position would be ignored.

Values are defined as follows:

auto

Indicates the initial position is the position of the box specified with position property.

Note: When position is static and offset-position is auto (and not ignored due to offset-path), we have positioning relative to normal flow.

<position>

Specifies the initial position, with the the containing block as the positioning area and a dimensionless point (zero-sized box) as the object area.

Note: This is similar to absolute positioning, except that offset-position does not prevent boxes from impacting the layout of later siblings.

A computed value of other than auto results in the creation of a stacking context [CSS21] and containing block, per usual for transforms.

offset-position is ignored if offset-path is a geometry-box, or a basic shape (other than a circle or ellipse with implicit center). In these cases, the geometry-box or basic shape specifies the initial position.

This example shows positioning a box with offset-position.

<style>
    #wrap {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid black;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 100px;
        left: 80px;
        offset-position: auto;
        offset-anchor: center;
        offset-path: ray(45deg);
    }
</style>
<body>
    <div id="wrap">
        <div id="box"></div>
    </div>
</body>

This example shows the interaction with the transform property, and with an individual transform property (rotate). The motion path transform is a vertical translation moving (left, top) to offset-position.

<style>
    #wrap {
        transform-style: preserve-3d;
        width: 400px;
        height: 350px;
    }
    .item {
        position: absolute;
        left: 200px;
        top: 0px;
        offset-position: 200px 100px; /* translates by 0px,100px */
        offset-anchor: left top;
        transform-origin: left top;
        width: 130px;
        height: 80px;
        border-top-right-radius: 23px;
    }
    #box1 {
        background-color: tomato;
        offset-position: auto;
    }
    #box2 {
        background-color: green;
    }
    #box3 {
        background-color: navy;
        rotate: 90deg; /* applied before motion path transform */
    }
    #box4 {
        background-color: gold;
        transform: rotate(90deg); /* applied after motion path transform */
    }
</style>
<body>
    <div id="wrap">
        <div class="item" id="box1"></div>
        <div class="item" id="box2"></div>
        <div class="item" id="box3"></div>
        <div class="item" id="box4"></div>
    </div>
</body>

This example uses position static, so offset-position generates translations from the normal flow positions. By amplifying these translations using scale, the normal flow is rotated 180 degrees around the offset-position, and the boxes are exploded away from each other.

<style>
    #wrap {
        transform-style: preserve-3d;
        width: 500px;
        height: 250px;
        line-height: 0px;
    }
    span {
        position: static;
        display: inline-block;
        width: 100px;
        height: 50px;
        border-top-right-radius: 23px;
        scale: 2.5 2.5; /* applied before motion path transform */
        offset-position: center;
        transform: scale(0.4); /* applied after motion path transform */
    }
    #box1 {
        background-color: tomato;
    }
    #box2 {
        background-color: green;
    }
    #box3 {
        background-color: navy;
    }
    #box4 {
        background-color: gold;
    }
</style>
<body>
    <div id="wrap">
        <div>
            <span id="box1"></span><span id="box2"></span>
        </div>
        <div>
            <span id="box3"></span><span id="box4"></span>
        </div>
    </div>
</body>

In this example, each offset-position value is ignored as offset-path is a <geometry-box>, but the other offset properties combine to have an effect equivalent to that for offset-position 'right bottom'.

<style>
    #wrap {
        transform-style: preserve-3d;
        width: 540px;
        height: 420px;
    }
    .item {
        position: absolute;
        width: 90px;
        height: 70px;
        border-top-right-radius: 23px;
        scale: 0.8 0.8; /* applied before motion path transform */
        offset-path: padding-box;
        offset-distance: 50%;
        offset-rotate: 0deg;
        offset-anchor: right bottom;
        transform: scale(1.25); /* applied after motion path transform */
    }
    #box1 {
        background-color: tomato;
        position: static;
        offset-position: auto; /* ignored */
    }
    #box2 {
        background-color: green;
        right: 0px;
        top: 0px;
        offset-position: 23% 45%; /* ignored */
    }
    #box3 {
        background-color: navy;
        left: 0px;
        bottom: 0px;
        offset-position: 34% 56px; /* ignored */
    }
    #box4 {
        background-color: gold;
        right: 0px;
        bottom: 0px;
        offset-position: 45px 67px; /* ignored */
    }
</style>
<body>
    <div id="wrap">
        <div class="item" id="box1"></div>
        <div class="item" id="box2"></div>
        <div class="item" id="box3"></div>
        <div class="item" id="box4"></div>
    </div>
</body>

2.4. Define an anchor point: The offset-anchor property

Defines an anchor point of the box positioned along the offset path. The anchor point specifies the point of the box which is to be considered as the point that is moved along the offset path.

Values have the following meanings:

auto

Computes to the value from offset-position, provided offset-path is none and offset-position is not auto. Otherwise, computes to the value from transform-origin. When auto is given to offset-anchor, and offset-path is none, offset-position behaves similar to background-position.

<position>

<percentage>

A percentage for the horizontal offset is relative to width of content area. A percentage for the vertical offset is relative to the height of the content area. For example, with a value pair of '100%, 0%', an anchor point is on the upper right corner of the box.

<length>

A length value gives a length offset from the upper left corner of the box’s content area.

The following explains how to set the anchor point of the box.

#plane {
    offset-anchor: center;
}

The red dot in the middle of the shape indicates the anchor point of the shape.

This example shows an alignment of four boxes with different anchor points.

<style>
    body {
        transform-style: preserve-3d;
        width: 300px;
        height: 300px;
        border: 2px solid gray;
        border-radius: 50%;
    }
    .box {
        width: 50px;
        height: 50px;
        background-color: orange;
        offset-position: 50% 50%;
        offset-distance: 100%;
        offset-rotate: 0deg;
    }
    #item1 {
        offset-path: ray(45deg closest-side);
        offset-anchor: right top;
    }
    #item2 {
        offset-path: ray(135deg closest-side);
        offset-anchor: right bottom;
    }
    #item3 {
        offset-path: ray(225deg closest-side);
        offset-anchor: left bottom;
    }
    #item4 {
        offset-path: ray(315deg closest-side);
        offset-anchor: left top;
    }
</style>
<body>
    <div class="box" id="item1"></div>
    <div class="box" id="item2"></div>
    <div class="box" id="item3"></div>
    <div class="box" id="item4"></div>
</body>

This example shows boxes centered at their offset-position.

<style>
    body {
        width: 500px;
        height: 500px;
    }
    .box {
        background-color: mediumpurple;
        offset-path: none;
        offset-anchor: center;
    }
    #item1 {
        offset-position: 90% 20%;
        width: 60%;
        height: 20%;
    }
    #item2 {
        offset-position: 100% 100%;
        width: 30%;
        height: 10%;
    }
    #item3 {
        offset-position: 50% 100%;
        width: 20%;
        height: 60%;
    }
    #item4 {
        offset-position: 0% 100%;
        width: 30%;
        height: 90%;
    }
</style>
<body>
    <div class="box" id="item1"></div>
    <div class="box" id="item2"></div>
    <div class="box" id="item3"></div>
    <div class="box" id="item4"></div>
</body>

This example shows how offset-anchor computes to their offset-position.

<style>
    body {
        width: 500px;
        height: 500px;
    }
    .box {
        background-color: mediumpurple;
        offset-path: none;
        offset-anchor: auto;
    }
    #item1 {
        offset-position: 90% 20%;
        width: 60%;
        height: 20%;
    }
    #item2 {
        offset-position: 100% 100%;
        width: 30%;
        height: 10%;
    }
    #item3 {
        offset-position: 50% 100%;
        width: 20%;
        height: 60%;
    }
    #item4 {
        offset-position: 0% 100%;
        width: 30%;
        height: 90%;
    }
</style>
<body>
    <div class="box" id="item1"></div>
    <div class="box" id="item2"></div>
    <div class="box" id="item3"></div>
    <div class="box" id="item4"></div>
</body>

2.5. Rotation at point: The offset-rotate property

Defines the orientation of the box while positioning along the offset path.

Values have the following meanings:

auto

Indicates that the object is rotated (over time if offset-distance is animated) by the angle of the direction (i.e., directional tangent vector) of the offset path, relative to the positive x-axis. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of auto.

Note: For ray paths, the rotation implied by auto is 90 degrees less than the ray’s bearing <angle>.

reverse

Indicates that the object is rotated (over time if offset-distance is animated) by the angle of the direction (i.e., directional tangent vector) of the offset path, relative to the positive x-axis, plus 180 degrees. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of reverse.

Note: This is the same as specifying auto 180deg.

<angle>

Indicates that the box has a constant clockwise rotation transformation applied to it by the specified rotation angle. See definitions of auto or reverse if specified in combination with either one of the keywords.

When the offset path is a zero length path, the value of offset-rotate is 0 degree, the direction of the positive x-axis.

If the offset path is composed of multiple line segments, the orientation at the connection between the segments is the direction of the "later" segment. (This matches SVG’s notion of direction of a path.)

Note: The rotation described here does not override or replace any rotation defined by the transform property.

The following examples use the shape of a plane. The red dot in the middle of the shape indicates the anchor point of the shape. When no offset properties are set, the shape is not translated or rotated along the path.

When the shape’s anchor point is placed at different positions along the path and offset-rotate is 0deg, the shape is not rotated.

If the offset-rotate property is set to auto, and the shape’s anchor point is placed at different positions along the path, the shape is rotated based on the gradient at the current position and faces the direction of the path at this position.

In this example, the offset-rotate property is set to reverse. The plane faces the opposite direction of the path at each position on the path.

The last example sets the offset-rotate property to -45deg. The shape is rotated anticlockwise by 45 degree once and keeps the rotation at each position on the path.

This example shows how auto or reverse work when specified in combination with <angle>. The computed value of <angle> is added to the computed value of auto or reverse.

<style>
    body {
        width: 300px;
        height: 300px;
        margin: 0px;
        border: solid gray;
        border-radius: 50%;
    }
    .circle {
        offset-position: 150px 150px;
        offset-distance: 86%;
        width: 42px;
        height: 42px;
        background-color: mediumpurple;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #item1 {
        offset-path: ray(0deg closest-side);
        offset-rotate: auto 90deg;
    }
    #item2 {
        offset-path: ray(45deg closest-side);
        offset-rotate: auto 90deg;
    }
    #item3 {
        offset-path: ray(135deg closest-side);
        offset-rotate: auto -90deg;
    }
    #item4 {
        offset-path: ray(180deg closest-side);
        offset-rotate: auto -90deg;
    }
    #item5 {
        offset-path: ray(225deg closest-side);
        offset-rotate: reverse 90deg;
    }
    #item6 {
        offset-path: ray(-45deg closest-side);
        offset-rotate: reverse -90deg;
    }
</style>
<body>
    <div class="circle" id="item1">1</div>
    <div class="circle" id="item2">2</div>
    <div class="circle" id="item3">3</div>
    <div class="circle" id="item4">4</div>
    <div class="circle" id="item5">5</div>
    <div class="circle" id="item6">6</div>
</body>

2.5.1. Calculating the path transform

Do we need to say how to get the position in more detail?

There needs to be a process for converting rotate() to an angle.

2.6. Offset shorthand: The offset property

This is a shorthand property for setting offset-position, offset-path, offset-distance, offset-rotate and offset-anchor. Omitted values are set to their initial values.

3. Privacy Considerations

This specification introduces no new privacy considerations.

4. Security Considerations

This specification introduces no new security considerations.

Changes

This section is non-normative.

The following changes were made since the 9 April 2015 First Public Working Draft.

• Renamed motion-path to offset-path for integrating with polar-angle.

  • Added the ray() to define an offset path as a line segment which direction is specified by <angle>.

  • Added <size> and contain value for the ray().

• Renamed motion-offset to offset-distance for integrating with polar-distance.

• Renamed motion-rotation to offset-rotate.

• Added offset-position to specify the initial position of the path by merging polar-origin from [CSS-ROUND-DISPLAY-1].

• Added offset-anchor to specify the origin point of the element by merging polar-anchor from [CSS-ROUND-DISPLAY-1].

• Renamed the shorthand property motion to offset.

• Made offset-rotate specify the rotation transformation by auto or reverse in combination with <angle>.

Acknowledgments

Thanks to fantasai, Hyojin Song, and all the rest of the CSS WG members for their reviews, comments, and corrections.