This is the Standard reference for animations.
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.
animation
Interactive example. Rule type: shorthand.
Prefixes: animation. Example: animation:none. It emits animation:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (110)
none, spin, ping, pulse, bounce, pulse, bounce, spin, ping, bounce-alt, flash, pulse-alt,
rubber-band, shake-x, shake-y, head-shake, swing, tada, wobble, jello, heart-beat, hinge, jack-in-the-box, light-speed-in-left,
light-speed-in-right, light-speed-out-left, light-speed-out-right, flip, flip-in-x, flip-in-y, flip-out-x, flip-out-y, rotate-in, rotate-in-down-left, rotate-in-down-right, rotate-in-up-left,
rotate-in-up-right, rotate-out, rotate-out-down-left, rotate-out-down-right, rotate-out-up-left, rotate-out-up-right, roll-in, roll-out, zoom-in, zoom-in-down, zoom-in-left, zoom-in-right,
zoom-in-up, zoom-out, zoom-out-down, zoom-out-left, zoom-out-right, zoom-out-up, bounce-in, bounce-in-down, bounce-in-left, bounce-in-right, bounce-in-up, bounce-out,
bounce-out-down, bounce-out-left, bounce-out-right, bounce-out-up, slide-in-down, slide-in-left, slide-in-right, slide-in-up, slide-out-down, slide-out-left, slide-out-right, slide-out-up,
fade-in, fade-in-down, fade-in-down-big, fade-in-left, fade-in-left-big, fade-in-right, fade-in-right-big, fade-in-up, fade-in-up-big, fade-in-top-left, fade-in-top-right, fade-in-bottom-left,
fade-in-bottom-right, fade-out, fade-out-down, fade-out-down-big, fade-out-left, fade-out-left-big, fade-out-right, fade-out-right-big, fade-out-up, fade-out-up-big, fade-out-top-left, fade-out-top-right,
fade-out-bottom-left, fade-out-bottom-right, back-in-up, back-in-down, back-in-right, back-in-left, back-out-up, back-out-down, back-out-right, back-out-left, spinner, skeleton,
[fade-in_1s_ease-in], $animation
animation-name
Interactive example.
Prefixes: animation-name. Example: animation-name:none. It emits animation-name:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (107)
none, pulse, bounce, spin, ping, bounce-alt, flash, pulse-alt, rubber-band, shake-x, shake-y, head-shake,
swing, tada, wobble, jello, heart-beat, hinge, jack-in-the-box, light-speed-in-left, light-speed-in-right, light-speed-out-left, light-speed-out-right, flip,
flip-in-x, flip-in-y, flip-out-x, flip-out-y, rotate-in, rotate-in-down-left, rotate-in-down-right, rotate-in-up-left, rotate-in-up-right, rotate-out, rotate-out-down-left, rotate-out-down-right,
rotate-out-up-left, rotate-out-up-right, roll-in, roll-out, zoom-in, zoom-in-down, zoom-in-left, zoom-in-right, zoom-in-up, zoom-out, zoom-out-down, zoom-out-left,
zoom-out-right, zoom-out-up, bounce-in, bounce-in-down, bounce-in-left, bounce-in-right, bounce-in-up, bounce-out, bounce-out-down, bounce-out-left, bounce-out-right, bounce-out-up,
slide-in-down, slide-in-left, slide-in-right, slide-in-up, slide-out-down, slide-out-left, slide-out-right, slide-out-up, fade-in, fade-in-down, fade-in-down-big, fade-in-left,
fade-in-left-big, fade-in-right, fade-in-right-big, fade-in-up, fade-in-up-big, fade-in-top-left, fade-in-top-right, fade-in-bottom-left, fade-in-bottom-right, fade-out, fade-out-down, fade-out-down-big,
fade-out-left, fade-out-left-big, fade-out-right, fade-out-right-big, fade-out-up, fade-out-up-big, fade-out-top-left, fade-out-top-right, fade-out-bottom-left, fade-out-bottom-right, back-in-up, back-in-down,
back-in-right, back-in-left, back-out-up, back-out-down, back-out-right, back-out-left, spinner, skeleton, custom-animation, [slide-in,_fade-out], $animationName
animation-duration
Interactive example.
Prefixes: animation-duration. Example: animation-duration:auto. It emits animation-duration:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
auto, 0, 200, 300, 500, 700, 1000, [2s], $duration
animation-timing-function
Interactive example.
Prefixes: animation-timing. Example: animation-timing:linear. It emits animation-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
animation-delay
Interactive example.
Prefixes: animation-delay. Example: animation-delay:0. It emits animation-delay:0s;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, -200, 200, 300, 500, 700, 1000, [calc(1s_-_200ms)], $delay
animation-iteration-count
Interactive example.
Prefixes: animation-iteration. Example: animation-iteration:infinite. It emits animation-iteration-count:infinite;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
infinite, 0, 1, 2, 2.5, 3, [2,_infinite], $iterations
animation-direction
Interactive example.
Prefixes: animation-direction. Example: animation-direction:normal. It emits animation-direction:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
normal, reverse, alternate, alternate-reverse, [normal,_reverse], $direction
animation-fill-mode
Interactive example.
Prefixes: animation-fill. Example: animation-fill:none. It emits animation-fill-mode:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, forwards, backwards, both, [none,_both], $fillMode
animation-play-state
Interactive example.
Prefixes: animation-play. Example: animation-play:paused. It emits animation-play-state:paused;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
paused, running, [running,_paused], $playState
animation-composition
Interactive example.
Prefixes: animation-composition. Example: animation-composition:replace. It emits animation-composition:replace;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
replace, add, accumulate, [replace,_add], $composition
animation-timeline
Interactive example.
Prefixes: animation-timeline. Example: animation-timeline:auto. It emits animation-timeline:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, none, --reveal, [scroll()], [view()], $timeline
animation-range-start
Interactive example.
Prefixes: animation-range-start. Example: animation-range-start:normal. It emits animation-range-start:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
normal, cover, contain, entry, exit, entry-crossing, exit-crossing, scroll, 10%, [entry_20%], $rangeStart
animation-range-end
Interactive example.
Prefixes: animation-range-end. Example: animation-range-end:normal. It emits animation-range-end:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
normal, cover, contain, entry, exit, entry-crossing, exit-crossing, scroll, 90%, [exit_80%], $rangeEnd