Transitions

Transition

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

// hardcoded value
<Box
  bg="danger.bg.initial"
  transition="background 0.2s ease-in-out"
  _hover={{
    bg: "danger.bg.hover"
  }}
>
  Hover me
</Box>
 
// shortcut value
<Box bg="danger.bg.initial" _hover={{ bg: "danger.bg.hover" }} transition="backgrounds">
  Hover me
</Box>

Prop	CSS Property	Token Category
`transition`	`transition`	-

Transition Timing Function

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

<Box
  bg="danger.bg.initial"
  _hover={{ bg: 'danger.bg.hover' }}
  transition="backgrounds"
  transitionTimingFunction="ease-in-out"
>
  Hover me
</Box>

Prop	CSS Property	Token Category
`transitionTimingFunction`	`transition-timing-function`	`easings`

Transition Duration

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

<Box
  bg="danger.bg.initial"
  _hover={{ bg: 'danger.bg.hover' }}
  transition="backgrounds"
  transitionDuration="fast"
>
  Hover me
</Box>

Prop	CSS Property	Token Category
`transitionDuration`	`transition-duration`	`durations`

Transition Delay

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

<Box
  bg="danger.bg.initial"
  _hover={{ bg: 'danger.bg.hover' }}
  transition="backgrounds"
  transitionDelay="fast"
>
  Hover me
</Box>

Prop	CSS Property	Token Category
`transitionDelay`	`transition-delay`	`durations`

Animation

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

<Box animation="bounce" />

Prop	CSS Property	Token Category
`animation`	`animation-name`	`animations`

Animation Name

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

Note

The value of the `animation` prop points to a global keyframe animation. Use the `theme.keyframes` object to define the animation.

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

Prop	CSS Property	Token Category
`animationName`	`animation-name`	`animations`

Animation Timing Function

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

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

Prop	CSS Property	Token Category
`animationTimingFunction`	`animation-timing-function`	`easings`

Animation Duration

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

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

Prop	CSS Property	Token Category
`animationDuration`	`animation-duration`	`durations`

Animation Delay

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

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

Prop	CSS Property	Token Category
`animationDelay`	`animation-delay`	`durations`