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
Select a block
Open the Block Inspector
Navigate to the Design tab
Open the Effects tab
Select the Transition tab
Click on the ➕ icon
Find the Duration property
Enter the desired Transition Duration value
Reset
Select a block
Open the Block Inspector
Navigate to the Design tab
Open the Effects tab
Click on the Transitions tab
Find the Duration property
Click dot to reset
Transition Delay
The Transition Delay property defines how long the transition will be paused before starting.
Modify
Select a block
Open the Block Inspector
Navigate to the Design tab
Open the Effects tab
Select the Transitions tab
Find the Delay property
Enter the desired Transition Delay value
Reset
Select a block
Open the Block Inspector
Navigate to the Design tab
Open the Effects tab
Select the Transitions tab
Find the Delay property to reset
Click dot to reset
Transition Timing
The Transition Timing property allows you to specify how quickly the transition progresses during its execution.
Modify
Select a block
Open the Block Inspector
Navigate to the Design tab
Open the Effects tab
Select the Transitions tab
Find the Timing property
Select the desired option from the dropdown
Remove
Select a block
Open the Block Inspector
Navigate to the Design tab
Open the Effects tab
Select the Transition tab
Find the Timing property to reset
Click dot to reset
Transition Property
The Transition Property property defines which properties will be affected by the transition.
Last updated