Transitions

Transition components are utilities that let you add motion to components.

Component demos Components API Hooks API

CssAnimation API

Import

import { CssAnimation } from '@mui/base/Transitions';
// or
import { CssAnimation } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

enterAnimationName

The name of the CSS animation (the animation-name CSS property) applied to the component when the transition is requested to enter.

Type:string

enterClassName

The name of the CSS class applied to the component when the transition is requested to enter.

Type:string

exitAnimationName

The name of the CSS animation (the animation-name CSS property) applied to the component when the transition is requested to exit.

Type:string

exitClassName

The name of the CSS class applied to the component when the transition is requested to exit.

Type:string

The component cannot hold a ref.

CssTransition API

Import

import { CssTransition } from '@mui/base/Transitions';
// or
import { CssTransition } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

enterClassName

The name of the CSS class applied to the component when the transition is requested to enter.

Type:string

exitClassName

The name of the CSS class applied to the component when the transition is requested to exit.

Type:string

lastTransitionedPropertyOnExit

The name of the CSS property that is transitioned the longest (has the largest transition-duration) on exit. This is used to determine when the transition has ended. If not specified, the transition will be considered finished end when the first property is transitioned. If all properties have the same transition-duration (or there is just one transitioned property), this can be omitted.

Type:string

The component cannot hold a ref.