<commit_before># Transitions

<p class="description">The theme key enables you to customize the durations and easings of the various transitions used across Material-UI components, and offers a utility for creating custom transitions.</p>

## API

### `theme.transitions.create(props, options) => transition`

#### Arguments

1. `props` (_String_ | _String[]_): Defaults to `['all']`. Provides a CSS property, or a list of CSS properties that should be transitioned.
2. `options` (_Object_ [optional]):

- `options.duration` (_String_ | _Number_ [optional]): Defaults to `theme.transitions.duration.standard`. Provides the duration of the transition.
- `options.easing` (_String_ [optional]): Defaults to `theme.transitions.easing.easeInOut`. Provides the easing for the transition.
- `options.delay` (_String_ | _Number_ [optional]): Defaults to `0`. Provides the delay for the transition.

#### Returns

`transition`: A CSS transition value, which composes all CSS properties that should be transitioned, together with the defined duration, easing and duration.

Use the <code>theme.transitions.create()</code> helper to create consistent transitions for the elements of your UI.</p>

```js
theme.transitions.create(['background-color', 'transform']);
```

#### Example

{{"demo": "pages/customization/transitions/TransitionHover.js", "defaultCodeOpen": false}}

### `theme.transitions.getAutoHeightDuration(height) => duration`
<commit_msg>[docs] Mention delay instead of transition twice (#23393)<commit_after># Transitions

<p class="description">The theme key enables you to customize the durations and easings of the various transitions used across Material-UI components, and offers a utility for creating custom transitions.</p>

## API

### `theme.transitions.create(props, options) => transition`

#### Arguments

1. `props` (_String_ | _String[]_): Defaults to `['all']`. Provides a CSS property, or a list of CSS properties that should be transitioned.
2. `options` (_Object_ [optional]):

- `options.duration` (_String_ | _Number_ [optional]): Defaults to `theme.transitions.duration.standard`. Provides the duration of the transition.
- `options.easing` (_String_ [optional]): Defaults to `theme.transitions.easing.easeInOut`. Provides the easing for the transition.
- `options.delay` (_String_ | _Number_ [optional]): Defaults to `0`. Provides the delay for the transition.

#### Returns

`transition`: A CSS transition value, which composes all CSS properties that should be transitioned, together with the defined duration, easing and delay.

Use the <code>theme.transitions.create()</code> helper to create consistent transitions for the elements of your UI.</p>

```js
theme.transitions.create(['background-color', 'transform']);
```

#### Example

{{"demo": "pages/customization/transitions/TransitionHover.js", "defaultCodeOpen": false}}

### `theme.transitions.getAutoHeightDuration(height) => duration`

{'fraction_non_alphanumeric': 0.12538435257943287, 'fraction_numerical': 0.0037581141100102495, 'mean_word_length': 5.684931506849315, 'pattern_counts': {'":': 4, '<': 13, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2648575', 'n_tokens_mistral': 806, 'n_tokens_neox': 779, 'n_words': 297}