Transitions

Transitions help create a smooth animation between different states of an element.

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.

Adding Transitions

To add and configure transitions between a class's states:

  1. Select an element with that class Make sure that No state is selected.

  2. Scroll to the Extras section

  3. Add a transition

  4. Choose the Transition Property that has a different style on any state

  5. 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.

Adding Transitions

Transition Values

To add a transition on an element you need to specify the following values:

Property

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...)

Transition Property

It’s recommended that you specify specific style properties that will be transitioned instead of using the All Properties option.

Duration

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.

Transition Duration

Transition Timing Function

Using this option you can create line or easing effects. The default value is “ease”.

Transition Timing Function