A duration and easing type can be customized to create a unique transition. A common use case is to create a smooth transition for hover states on elements so that they don’t abruptly change on hover.
To add and configure transitions between a class's states:
Select an element with that class Make sure that No state is selected.
Scroll to the Extras section
Add a transition
Choose the Transition Property that has a different style on any state
Adjust or keep the Duration and Transition Timing Function values as they are
Add more transitions for each property/style that you have added in any state.
To add a transition on an element you need to specify the following values:
Here you specify the style property that you want to transition. By default, the width property is selected, but you can choose any other property listed here. ( Background Color, Opacity, etc...)
It’s recommended that you specify specific style properties that will be transitioned instead of using the All Properties option.
Here you can specify the duration of the transition in seconds (s) either using the slider or by typing in the value. The default value is 2s.
Using this option you can create line or easing effects. The default value is “ease”.