Transitions

Transition

Use the transition prop to control the transition of an element.

// hardcoded value
<Box bg="red.400" _hover={{ bg: "red.500" }} transition="background 0.2s ease-in-out">
  Hover me
</Box>

// shortcut value
<Box bg="red.400" _hover={{ bg: "red.500" }} transition="backgrounds">
  Hover me
</Box>

Transition Timing Function

Use the transitionTimingFunction prop to control the timing function of a transition.

<Box
  bg="red.400"
  _hover={{ bg: "red.500" }}
  transition="backgrounds"
  transitionTimingFunction="ease-in-out"
>
  Hover me
</Box>

Transition Duration

Use the transitionDuration prop to control the duration of a transition.

<Box
  bg="red.400"
  _hover={{ bg: "red.500" }}
  transition="backgrounds"
  transitionDuration="fast"
>
  Hover me
</Box>

Transition Delay

Use the transitionDelay prop to control the delay of a transition.

<Box
  bg="red.400"
  _hover={{ bg: "red.500" }}
  transition="backgrounds"
  transitionDelay="fast"
>
  Hover me
</Box>

Animation

Use the animation prop to control the animation of an element.

<Box animation="bounce" />

Animation Name

Use the animationName prop to control the name of an animation. Compose multiple animation names to create complex animations.

<Box animationName="bounce, fade-in" animationDuration="fast" />

Animation Timing Function

Use the animationTimingFunction prop to control the timing function of an animation.

<Box animation="bounce" animationTimingFunction="ease-in-out" />

Animation Duration

Use the animationDuration prop to control the duration of an animation.

<Box animation="bounce" animationDuration="fast" />

Animation Delay

Use the animationDelay prop to control the delay of an animation.

<Box animation="bounce" animationDelay="fast" />