Transition Duration

Utilities for controlling the duration of CSS transitions.

Usage

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>

Responsive

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.

Customizing

Durations

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

Automatic

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.

Manual

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

import styled from '...'
import { th } from '@xstyled/...'

const Switch = styled.radio`
  transition: opacity ${th.duration('instant')};
`

Hooks

Get a transition property in any component using useDuration hook:

import { useDuration } from '@xstyled/...'

function Button() {
  const duration = useDuration('fast-out')
}