# Transitions

The Transitions property controls the animation speed of CSS elements so that no abrupt movements disturb the visiting user.

#### Transition Duration

The Transition Duration property defines how long the transition lasts.

<details>

<summary>Modify</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Select the Transition tab
6. Click on the ➕ icon
7. Find the Duration property
8. Enter the desired Transition Duration value

</details>

<details>

<summary>Reset</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Click on the Transitions tab
6. Find the Duration property
7. Click dot to reset

</details>

#### Transition Delay

The Transition Delay property defines how long the transition will be paused before starting.

<details>

<summary>Modify</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Select the Transitions tab
6. Find the Delay property
7. Enter the desired Transition Delay value

</details>

<details>

<summary>Reset</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Select the Transitions tab
6. Find the Delay property to reset
7. Click dot to reset

</details>

#### Transition Timing

The Transition Timing property allows you to specify how quickly the transition progresses during its execution.

<details>

<summary>Modify</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Select the Transitions tab
6. Find the Timing property
7. Select the desired option from the dropdown

</details>

<details>

<summary>Remove</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Select the Transition tab
6. Find the Timing property to reset
7. Click dot to reset

</details>

#### Transition Property

The Transition Property property defines which properties will be affected by the transition.

<details>

<summary>Modify</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Advanced tab
4. Open the Effects tab
5. Select the Transitions icon
6. Find the Property property
7. Enter the desired Transition property value

</details>

<details>

<summary>Reset</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Design tab
4. Open the Effects tab
5. Select the Transitions icon
6. Find the Property property
7. Click dot to reset

</details>