Durations

Duration of the animation effect, used to describe CSS Transition.

Read more about creating animations with Sky UI in the Motion Guide.

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.

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.