---
title: "Foundations — Durations"
canonical: https://sky-ui.cf.sky.com/foundations/durations
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Foundations — Durations

Durations of the animation effects.

Duration of the animation effect, used to describe [CSS Transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition).

Read more about creating animations with Sky UI in the [Motion Guide](/guides/motion/).

```js
import { duration } from '@sky-uk/ui-core';

duration('short-2');

// returns '200ms'
```

---

You can return the duration without a `ms` suffix by passing `false` as a second argument. This is useful if you need to use the raw number for calculations.

```js
duration('short-2', false);

// returns 200
```

---

## Available Durations

| Value | Duration | Usage |
| --- | --- | --- |
| `short-1` | 100ms | Functional animations of small elements, best paired with `linear` easing. |
| `short-2` | 200ms | This value is used for quick and smooth animation of small elements. Commonly used for Hover effects of Buttons, Checkboxes, Switches, Cards etc. |
| `medium-1` | 400ms | Best suited for medium size components and elements that require moderate motion, such as the Slide transitions in Carousels, Modals. |
| `medium-2` | 600ms | Animations requiring a slower and more deliberate benefit from this duration. For example, Notification and Toast use this value for a slower, more controlled motion. |