Transition Delay

Utilities for controlling the delay of CSS transitions.

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

Usage

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

<> <template preview> <x.div display="flex" justifyContent="space-around" alignItems="center"> <x.button fontWeight="medium" transition transitionDuration={500} transitionDelay={150} color="white" bg={{ _: 'amber-600', hover: 'red-600' }} py={3} px={6} borderRadius="md" border={0} > Hover me </x.button> <x.button fontWeight="medium" transition transitionDuration={500} transitionDelay={300} color="white" bg={{ _: 'amber-600', hover: 'red-600' }} py={3} px={6} borderRadius="md" border={0} > Hover me </x.button> <x.button fontWeight="medium" transition transitionDuration={500} transitionDelay={700} color="white" bg={{ _: 'amber-600', hover: 'red-600' }} py={3} px={6} borderRadius="md" border={0} > Hover me </x.button> </x.div> </template> <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.

Edit this page on GitHub