The engine
The properties, and how they reach the DOM
Properties compose in groups, and each group reaches the DOM its own way. Transforms apply in Motion's own order, which is what lets the Motion export give each transform its own transition.
| Group | Properties, in composition order |
|---|---|
| transform | X → Y → Scale → Scale X → Scale Y → Rotate → Rotate X → Rotate Y → Skew X → Skew Y |
| opacity | Opacity: its own property, shared with nothing. |
| filter | Blur → Brightness → Saturate → Contrast → Drop shadow |
| path | Along path: its own offset-distance, in percent, and only meaningful on an element with a motion path. Its resting value is 100%, since every path ends where the element rests. |
| color | Background, Text color, Border: each is its own declaration (background-color, color, border-color), so there’s no order between them. |
Filter values are clamped to their valid range in every dialect. An underdamped spring on blur often dips below zero, and blur(-4px) is invalid CSS, so the browser would drop the whole declaration.