The Divi Transition Options allow you to control the transition duration, delay, and speed curve of any hover animations you have applied to an element.

This gives you more control over how your hover animations animate on your page. In this guide, we'll go over how to access transition options, how to use them, and more resources on the topic.

Transition options are available within all Divi's Sections, Rows, and Modules.

Three main components to adjusting transitions are the transition duration, delay, and speed curve.

These all work together to adjust the look and feel of your transitions. However, the transition duration must always be higher than 0 for the other transition settings to also come into effect.

This controls the transition duration of the hover animation in milliseconds. Drag the range slider to increase or decrease the duration of the hover animation.

This controls the transition delay of the hover animation in milliseconds. Increase the animation's delay by dragging the range slider to the right.

This controls the transition speed curve of the hover animation.

Ease-In-Out is a smoother and subtler transition, whereas Linear is a snappier transition. Let's look at an example of each.

A transition effect with a slow start and a slow end.

It is a transition effect with a slow start, then gets faster and ends slowly.

A transition effect that starts slow.

A transition effect that ends slowly.

A transition effect that is the same speed from start to end.