These theme helpers allow you to create custom CSS transitions, you can customize the durations, easings and more.
props
(string | string[]): Defaults to['all']
. Provides a CSS property, or a list of CSS properties that should be transitioned.options
(object [optional]):
options.duration
(string | number [optional]): Defaults totheme.transitions.duration.standard
. Provides the duration of the transition.options.easing
(string [optional]): Defaults totheme.transitions.easing.easeInOut
. Provides the easing for the transition.options.delay
(string | number [optional]): Defaults to0
. Provides the delay for the transition.
transition
: A CSS transition value, which composes all CSS properties that should be transitioned, together with the defined duration, easing and delay.
Use the theme.transitions.create()
helper to create consistent transitions for the elements of your UI.
theme.transitions.create(['background-color', 'transform']);
{{"demo": "TransitionHover.js", "defaultCodeOpen": false}}
height
(number): The height of the component.
duration
: The calculated duration based on the height.
You can change some or all of the duration values, or provide your own (for use in the create()
helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add.
const theme = createTheme({
transitions: {
duration: {
shortest: 150,
shorter: 200,
short: 250,
// most basic recommended timing
standard: 300,
// this is to be used in complex animations
complex: 375,
// recommended when something is entering screen
enteringScreen: 225,
// recommended when something is leaving screen
leavingScreen: 195,
},
},
});
You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function
value.
const theme = createTheme({
transitions: {
easing: {
// This is the most common easing curve.
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
// Objects enter the screen at full velocity from off-screen and
// slowly decelerate to a resting point.
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
// Objects leave the screen at full velocity. They do not decelerate when off-screen.
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
// The sharp curve is used by objects that may return to the screen at any time.
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
},
},
});
Check out the Transitions page to explore the transition components that are included with Material UI.