Skip to content
TeaCSS documentation

Motions

Motion paths and related movement properties. TeaCSS Standard reference.

This is the Standard reference for motions. The vocabulary comes from the teacss-ts Storybook at revision 9de266d for package version 0.10.11. Each value list gives finite examples and named values for its prefixes. A bracket or variable example demonstrates that open form for the same prefix; the listed arbitrary literals are samples, not every accepted literal. Check the Storybook token reference for more examples, and do not infer support from a different prefix.

offset-path

Interactive example. Prefixes: offset-path. Example: offset-path:none. It emits offset-path:none;.

Documented values (4)

none, [ray(90deg_farthest-side)], [circle(32px_at_center)], border-box

offset-distance

Interactive example. Prefixes: offset-distance. Example: offset-distance:0. It emits offset-distance:0;.

Documented values (4)

0, 10, 50%, 100%

offset-rotate

Interactive example. Prefixes: offset-rotate. Example: offset-rotate:auto. It emits offset-rotate:auto;.

Documented values (4)

auto, reverse, 90, [auto_90deg]

offset-anchor

Interactive example. Prefixes: offset-anchor. Example: offset-anchor:auto. It emits offset-anchor:auto;.

Documented values (3)

auto, center, top-left

offset-position

Interactive example. Prefixes: offset-position. Example: offset-position:normal. It emits offset-position:normal;.

Documented values (3)

normal, auto, [16px_16px]