This is the Standard reference for transitions.
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.
transition
Interactive example. Rule type: shorthand.
Prefixes: transition. Example: transition:none. It emits transition:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, [opacity_200ms_ease], $transition
transition-property
Interactive example.
Prefixes: transition-property. Example: transition-property:none. It emits transition-property:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, all, colors, opacity, shadow, transform, [color,_opacity], $property
transition-duration
Interactive example.
Prefixes: transition-duration. Example: transition-duration:0. It emits transition-duration:0s;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
0, 75, 100, 150, 200, 300, 500, 700, 1000, [250ms], $duration
transition-timing-function
Interactive example.
Prefixes: transition-timing. Example: transition-timing:linear. It emits transition-timing-function:linear;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (14)
linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, accelerate, decelerate, smooth, tooltip, [cubic-bezier(.2,0,.1,1)],
[steps(4,end)], $timing
transition-delay
Interactive example.
Prefixes: transition-delay. Example: transition-delay:0. It emits transition-delay:0s;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
0, -75, 75, 100, 150, 200, 300, 500, 700, 1000, [calc(1s_-_200ms)], $delay
transition-behavior
Interactive example.
Prefixes: transition-behavior. Example: transition-behavior:normal. It emits transition-behavior:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
normal, allow-discrete, [normal,_allow-discrete], $behavior
view-transition-name
Interactive example.
Prefixes: view-transition-name. Example: view-transition-name:none. It emits view-transition-name:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, auto, match-element, header, [hero-card], $viewTransitionName
view-transition-class
Interactive example.
Prefixes: view-transition-class. Example: view-transition-class:none. It emits view-transition-class:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
none, card, [card_featured], $viewTransitionClass
view-transition-group
Interactive example.
Prefixes: view-transition-group. Example: view-transition-group:normal. It emits view-transition-group:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
normal, contain, nearest, gallery, [gallery], $viewTransitionGroup
view-transition-scope
Interactive example. Maturity: experimental. Browser support: CSS View Transitions Level 2 scoped transitions have limited browser support.
Prefixes: view-transition-scope. Example: view-transition-scope:none. It emits view-transition-scope:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
none, all, [none], $viewTransitionScope