1. Introduction
This section is not normative.
Authors have possibilities to position objects like elements, boxes or containers relative to each other or absolutely in their own coordinate system. CSS Transforms extends these possibilities with a set of transform functions allowing authors to mutate the object’s local coordinate system. With CSS Animations and CSS Transitions, these static placements can change over a given period of time. Both kind of animations are powerful to express transitions in time but not suitable to describe transitions of location of an object over time.
This specification allows authors to specify an motion path. The object can be transitioned along this motion path over a given period of time. The time may be static if no animation was specified.
In the following example, a schematic of an air plane is animated along a motion path. The plane faces in the direction of the motion path at each position on the path.
A motion path may consist of a <basic-shape> like <circle()>, <inset()> or <polygon()>. To allow authors to specify curves and sub-paths, this specification adds the <path()> function in addition to the existing <basic-shape> functions. The <path()> function takes an SVG Path string as input [SVG2]. As a third option, authors may reference an SVG shape element by <url> which is used as the motion path.
2. Module interactions
This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a stacking context.
Some CSS properties in this specification manipulate the user coordinate system of the element by transformations. These transformations are pre-multiplied to transformations specified by the transform property or deriving properties.
The term object bounding box follows the definition in SVG 1.1 [SVG11].
3. Values
This specification follows the CSS property definition conventions from [CSS21]. Basic shapes are defined in CSS Shapes Module Level 1 [CSS-SHAPES]. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [CSS3VAL]. Basic shapes are extended by the <path()> basic shape function.
In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as inherit as their property value [CSS3VAL]. For readability it has not been repeated explicitly.
4. Motion Paths
Add more details and examples.
4.1. Motion path: The motion-path property
Name: | motion-path |
---|---|
Value: | <url> | [ <basic-shape> | <path()> ] || <geometry-box> | none |
Initial: | none |
Applies to: | All elements. In SVG, it applies to container elements excluding the defs element and all graphics elements
|
Inherited: | no |
Percentages: | n/a |
Media: | visual |
Computed value: | as specified |
Animatable: | no |
Specifies the motion path the element gets positioned at. The exact element’s position on the motion path is determined by the motion-offset property. A motion path is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape. Each shape or path must define an initial position for the computed value of "0" for motion-offset and an initial direction which specifies the rotation of the object on the initial position.
In this specification a direction (or rotation) of 0 degree is equivalent to the direction of the positive x-axis in the object’s local coordinate system. E.g a rotation of 0 degree points to the right side of the UA if the object and its ancestors have no transformation applied.
Values have the following meanings:
- <basic-shape>
-
The motion path is a basic shape as specified in CSS Shapes [CSS-SHAPES]. The initial position and the initial direction for basic shapes are defined as follows:
- <circle()>
- <ellipse()>
- The initial position is defined by the point where a virtual tangent to the circle/ellipse would reach the top vertical position. The initial direction is 0 degree.
- <inset()>
- The initial position is defined by the left top corner of the rectangle. The initial direction is 0 degree.
- <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. If there is no such unequal coordinate pair, the initial direction is defined with 0 degree.
- <circle()>
- path() = path([ <fill-rule> ,]? <string>)
-
The <string> represents an SVG Path data string. The path data string must be conform to the grammar and parsing rules of SVG 1.1 [SVG11]. The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1 [SVG11].
<fill-rule> - The filling rule used to determine the interior of the path. See fill-rule property in SVG for details. Possible values are nonzero or evenodd. Default value when omitted is nonzero.
- <url>
- References an SVG shape element and uses its geometry as motion path. See SVG 1.1 for more information about the initial position and initial direction [SVG11].
- none
- No motion path gets created.
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1, unless the element is an SVG element with out an associated CSS layout box.
A reference that fails to download, is not a reference to an SVG shape element element, or is non-existent is ignored. No motion path and no stacking context are created.
See the section “Motion processing” for how to process a motion path.
For SVG elements without associated CSS layout box, the used value for content-box, padding-box, border-box and margin-box is fill-box.
For elements with associated CSS layout box, the used value for fill-box, stroke-box and view-box is border-box.
4.2. Position on motion path: The motion-offset property
Name: | motion-offset |
---|---|
Value: | <length> | <percentage> |
Initial: | 0 |
Applies to: | All elements. In SVG, it applies to container elements excluding the defs element and all graphics elements
|
Inherited: | no |
Percentages: | refer to the total path length |
Media: | visual |
Computed value: | as specified |
Animatable: | yes |
A distance that describes the position along the specified motion path.
- <percentage>
- <length>
- The distance from the initial position of the shape or path to the position of the element. Percentages are relative to the total path length including all sub-paths.
See the section “Motion processing” for how to process a motion position.
4.3. Rotation at point: The motion-rotation property
Name: | motion-rotation |
---|---|
Value: | [ auto | reverse ] && <angle> |
Initial: | auto |
Applies to: | All elements. In SVG, it applies to container elements excluding the defs element and all graphics elements
|
Inherited: | no |
Percentages: | n/a |
Media: | visual |
Computed value: | as specified |
Animatable: | yes |
Defines the direction of the element while positioning along the motion path.
Values have the following meanings:
- auto
- Indicates that the object is rotated (over time if motion-offset is animated) by the angle of the direction (i.e., directional tangent vector) of the motion path. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of auto.
- reverse
-
Indicates that the object is rotated (over time if motion-offset is animated) by the angle of the direction (i.e., directional tangent vector) of the motion path plus 180 degrees. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of reverse.
This is the same as specifying auto 180deg.
- <angle>
- Indicates that the element has a constant 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. For the purpose of this argument, 0deg points to the right side in the direction of the positive x-axis, and positive angles represent clockwise rotation, so 90deg point toward the bottom.
Note: The rotation described here does not override or replace any rotation defined by the transform property.
In the first example, the motion-rotation property is set to auto. The shape’s point of origin is placed at different positions along the motion path. The shape is rotated based on the gradient at the current position and faces the direction of the motion path at this position.
In this example, the motion-rotation property is set to reverse. The plane faces the opposite direction of the motion path at each position on the motion path.
The last example sets the motion-rotation property to -45deg. The shape is rotated by -45 degree once and keeps the rotation at each position on the motion path.
More natural names requested for auto and reverse.
See the section “Motion processing” for how to process a motion rotation.
4.4. Motion shorthand: The motion property
Name: | motion |
---|---|
Value: | <motion-path> && <motion-offset> && <motion-rotation> |
Initial: | see individual properties |
Applies to: | All elements. In SVG, it applies to container elements excluding the defs element and all graphics elements
|
Inherited: | no |
Percentages: | see individual properties |
Media: | visual |
Computed value: | see individual properties |
Animatable: | see individual properties |
This is a shorthand property for setting motion-path, motion-offset and motion-rotation. Omitted values are set to their initial values.
4.5. Motion processing
4.5.1. Calculating the computed distance along a path
Processing the distance along a path operates differently depending upon whether the path is open or closed:
-
All basic CSS shapes are closed.
-
Paths (including references to SVG Paths) are closed only if the final command in the path list is a closepath command ("z" or "Z").
-
References to SVG circles, ellipses, images, polygons and rects are closed.
-
References to SVG lines and polylines are open.
To determine the computed distance for a given path and distance:
-
Let the total length be the total length of path with all sub-paths.
-
-
If distance is a length:
-
Let upper bound be equal to the total length.
-
Otherwise:
-
Let upper bound be equal to 100%.
-
-
-
If path is a closed path:
-
Let computed distance be equal to distance modulus upper bound.
-
Otherwise:
-
Let computed distance be equal to distance clamped by 0 and upper bound.
-
4.5.2. Calculating the path transform
-
Let path be the geometry of the specified basic shape, path or SVG shape element reference.
-
Let distance be the computed value of motion-offset.
-
-
If path is a valid path:
-
-
Determine the computed distance by invoking the process for Calculating the computed distance along a path on path and distance.
-
Let position be the coordinate pair at computed distance along path.
-
Create the supplemental transformation matrix transform to the local coordinate system of the element.
-
Translate transform by position.
-
Let rotate be the computed value of motion-rotation.
-
Post-multiply the rotation rotate to transform.
-
Post-multiply transform to the local coordinate system of the element.
-
-
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.
Do we need to specify an origin of the element in motion so that it can be positioned accordingly before the motion? Something like motion-origin? Should we reuse transform-origin? (Probably not since the z coordinate doesn’t make any sense.)