# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/design/effects/transitions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
