Transitions

JSX style props for controlling an element's transition and animation.

Transition

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

1
// hardcoded value
2
<Box
3
  bg="danger.bg.initial"
4
  transition="background 0.2s ease-in-out"
5
  _hover={{
6
    bg: "danger.bg.hover"
7
  }}
8
>
9
  Hover me
10
</Box>
11

12
// shortcut value
13
<Box bg="danger.bg.initial" _hover={{ bg: "danger.bg.hover" }} transition="backgrounds">
14
  Hover me
15
</Box>

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

Transition Timing Function

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

1
<Box
2
  bg="danger.bg.initial"
3
  _hover={{ bg: "danger.bg.hover" }}
4
  transition="backgrounds"
5
  transitionTimingFunction="ease-in-out"
6
>
7
  Hover me
8
</Box>

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

Transition Duration

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

1
<Box
2
  bg="danger.bg.initial"
3
  _hover={{ bg: "danger.bg.hover" }}
4
  transition="backgrounds"
5
  transitionDuration="fast"
6
>
7
  Hover me
8
</Box>

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

Transition Delay

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

1
<Box
2
  bg="danger.bg.initial"
3
  _hover={{ bg: "danger.bg.hover" }}
4
  transition="backgrounds"
5
  transitionDelay="fast"
6
>
7
  Hover me
8
</Box>

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

Animation

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

1
<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.

1
<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.

1
<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.

1
<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.

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

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

On this page

Edit this page on Github