This is the Standard reference for transitions.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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