Transition Duration

Utilities for controlling the duration of CSS transitions.

React propsCSS Properties
transitionDuration={duration}transition-duration: {duration};


Use transitionDuration={duration} utilities to control an element's transition-duration.

<x.button transition transitionDuration="instant"> Hover me </x.button> <x.button transition transitionDuration="fast-in"> Hover me </x.button> <x.button transition transitionDuration={700}> Hover me </x.button> <x.button transition transitionDuration="3s"> Hover me </x.button>


To control an element's transition-duration at a specific breakpoint, use responsive object notation. For example, adding the property transitionDuration={{ md: 300 }} to an element would apply the transitionDuration={300} utility at medium screen sizes and above.

<x.div transitionDuration={{ md: 300 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.



If you'd like to customize your values for durations, use the theme.durations section of your theme.

// theme.js export const theme = { durations: { // ... instant: '100ms', 'fast-in': '250ms', 'fast-out': '200ms', 'slow-in': '300ms', 'slow-out': '250ms', + 'very-slow': '400ms', }, }

If you don't want to customize it, a set of durations based on Google Material Design recommendations is already defined in default theme.

const defaultTheme = { // ... durations: { instant: '100ms', 'fast-in': '250ms', 'fast-out': '200ms', 'slow-in': '300ms', 'slow-out': '250ms', }, }

Styled bindings


Using xstyled's styled, all transition properties defined are automatically bound to transition-property attribute:

import styled from '@xstyled/...' const Button = styled.button` transition-duration: fast-in; `

To learn more about styled syntax, read styled syntax documentation.


It is possible to manually bind a transition property using th.duration utility:

import styled from '...' import { th } from '@xstyled/...' const Switch =` transition: opacity ${th.duration('instant')}; `


Get a transition property in any component using useDuration hook:

import { useDuration } from '@xstyled/...' function Button() { const duration = useDuration('fast-out') }
Edit this page on GitHub