import { Meta } from "@storybook/addon-docs"; # Animation tokens Premade keyframe effects allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations. ## Using animation tokens

TipAnimations are defined as CSS Custom properties, to use them, use: var(--animation-fade) as the CSS property value.

``` animation: var(--animation-fade) forward; // forward for in, reverse for out, alternate or alternate-reverse animation-duration: var(--duration-500); ``` ### Enter/Exit Animations For adding/removing elements in the interface. These can be combined for more advanced animations.

--animation-fade

--animation-scale

--animation-scale-50

--animation-slide-vertical

--animation-slide-vertical-50

--animation-slide-vertical-10

--animation-slide-horizontal

--animation-slide-horizontal-50

--animation-slide-horizontal-10

--animation-fade --animation-slide-vertical

--animation-scale --animation-fade

### Continuous Animations For loading or attention grabbers

--animation-shake-x

--animation-shake-y

--animation-spin

--animation-ping

--animation-blink

--animation-float

--animation-bounce

--animation-pulse

## Easing Tokens Applying easing tokens can change the way animations are played. ### Using Easing tokens ``` animation-timing-function: var(--ease-1); ```

--ease-1

--ease-3

--ease-5

--ease-elastic-1

--ease-elastic-3

--ease-elastic-5

--ease-squish-1

--ease-squish-3

--ease-squish-5

--ease-step-1

--ease-step-3

--ease-step-5

## Duration Tokens Applying easing tokens can change the duration of an animation ### Using Easing tokens ``` animation-duration: var(--duration-500); ```

--duration-75

--duration-100

--duration-150

--duration-200

--duration-300

--duration-500

--duration-700

--duration-1000

--duration-1500

--duration-2000

--duration-3000