Transition options allow a smooth motion movement from Normal to Hover Element state. Use this when you have different CSS rules (color, effects, shadow, etc) applied to Normal and Hover states.
A quick intro to Transition Animations:
With Transition Animations, you can add simple transition animations to your widgets and sections.
Getting the most value out of Transition Animations:
Here are some different ways you can use it to add motion to your website:
- Add transition to on elements that have hover effects. This will make the hover effects more appealing.
- Use it in conjunction with other Designer Powerup features such as Transformations or CSS Effects.
Adding Transition to Elementor Element:
- Select the desired Element (Section/Column/Widget).
- Navigate to the Transition section in the Powerup tab.
- Turn on the switch to enable the transition.
- Fine-tune the Duration, Function, and Delay to how you want the transition to happen.
This setting applies the transition to all the CSS rules and overwrites the transition duration setting set in the Advanced tab -> Background -> Hover State -> Transition Duration.
Note:
- Disabling the transition will remove the applied effect from the element or widget.
- Transitions can also be applied to sections and columns.