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.

Modify

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

Reset

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

Transition Delay

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

Modify

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

Reset

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

Transition Timing

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

Modify

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

Remove

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

Transition Property

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

Modify

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

Reset

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