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={150}>
  Hover me
</x.button>
<x.button transition transitionDuration={300}>
  Hover me
</x.button>
<x.button transition transitionDuration={700}>
  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.