Transition Delay

Utilities for controlling the delay of CSS transitions.

Usage

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>

Responsive

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.