This is the Standard reference for animations.
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.
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