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

Edit this page on GitHub