Transitions help create a smooth animation between different states of an element.
A common use case is to create a smooth transition for hover states on elements so that they don’t abruptly change on hover. For example, if you have added the shadow to an element on hover, then, by default, you will get an abrupt change on hover. To make the state change smoothly, you need to add a transition. A duration and easing type can be customized to create a unique transition.
- Select an element for which you want to add a transition (it must have styles set for different states)
- Find the Effects section on the Styles tab in the right panel and click on “+” to the right of Transitions:
By default, a transition will be added that is applied to All Properties of the element. You can set a transition for any property by clicking on its name and selecting the property from the dropdown list.
To setup a transition, click on the button to the left of its name.
In the Settings window, you can setup the following properties:
Transition – property (style) affected by the transition. Here you can select All Properties or one of the properties of an element. Choose the property that you have set to change for different states of an element (for example, Box Shadow for the shadow).
Delay – specifies the time before the transition starts (pre-effect delay) in milliseconds (ms). The default delay value is 0 ms. You can select a value from 0 to 1000 ms from the drop-down list.
Duration – specifies the duration of the transition in milliseconds (ms). You can change the duration, set to 300ms by default, by a value from the dropdown list or entering the duration value into the input field.
Easing – allows you to select an easing effect to create more realistic transition effects.
- Base Easing - starts slowly, speeds up in the middle, slows down at the end.
- Ease In - starts slowly and speeds up at the end.
- Ease Out - starts fast and slows down at the end.
For convenience, there are Bezier curves for each type of transition easing with pre-defined properties.