Transition Delay

Utilities for controlling the delay of CSS transitions.

React propsCSS Properties
transitionDelay={duration}transition-delay: {duration};


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

<x.button transition transitionDelay={150}> Hover me </x.button> <x.button transition transitionDelay={300}> Hover me </x.button> <x.button transition transitionDelay={700}> Hover me </x.button>


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

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

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

Edit this page on GitHub