Transitions



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.

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.

Easing type:

For convenience, there are Bezier curves for each type of transition easing with pre-defined properties.