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

Webflow transitions

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

  1. Select an element with that class
    Make sure the None state is selected.
  2. Scroll to the Transitions & Transforms section
  3. Add a transition
  4. Choose the Property that has a different style on any state
  5. Adjust or keep the Duration and Easing values as they are

Add more transitions for each property/style that you have added in any state.

 

Transition Values

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

Property

Webflow transitions

Here you specify the style property that you want to transition. By default, the opacity property is selected, but you can choose any other property listed here.

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

Duration

Webflow transitions

Here you can specify the duration of the transition in milliseconds (ms) either using the slider or by typing in the value. The default value is 200ms.

Easing

Webflow transitions

The easing field gives you the option to type in a value or open the Easing Editor, which allows you to browse presets or create unique easing effects. The default easing value is “ease”.

 
To add a transition, you need to be in the none or default state. Adding transitions to the non state will apply them to all states automatically.

An example

  1. Select a button
  2. Add a box shadow and style it so everything looks just how you want it to look
  3. Go to the Hover state
  4. Increase the intensity of the shadow, and the distance
  5. Switch back to None state
  6. Add a transition. Choose Box Shadow from the Property dropdown.
  7. Add a 500ms duration.
  8. Keep the easing as is.

Now, hover over the button, you can see the intensity and distance of the shadow transition smoothly.