# Motion variables

To import, use `@import 'node_modules/@teliads/components/foundations/motion/variables'`.

## Transition-duration

| Token                | Speed  | Type  |
| -------------------- | ------ | ----- |
| $telia-duration-50   | 50ms   | Micro |
| $telia-duration-100  | 100ms  | Micro |
| $telia-duration-150  | 150ms  | Micro |
| $telia-duration-200  | 200ms  | Micro |
| $telia-duration-250  | 250ms  | Macro |
| $telia-duration-300  | 300ms  | Macro |
| $telia-duration-350  | 350ms  | Macro |
| $telia-duration-400  | 400ms  | Macro |
| $telia-duration-500  | 500ms  | Macro |
| $telia-duration-1500 | 1500ms | Macro |

## Transition-timing-function

| Easing curve       | CSS                                  |
| ------------------ | ------------------------------------ |
| $telia-ease-in     | cubic-bezier(0.35, 0.07, 0.88, 0.43) |
| $telia-ease-out    | cubic-bezier(0.33, 0.9, 0.75, 0,95)  |
| $telia-ease-in-out | cubic-bezier(0.45, 0, 0.52, 0.98)    |
