Your website can come to life with animations, giving users a dynamic and interesting experience. One of the most well-liked WordPress themes and page builders, Divi, has a powerful function called the Transform effect. You can animate components such as text, images, rows, and sections combined with the hover effect.
Customizing the animation duration is crucial for producing seamless and polished transitions. Unfortunately, Divi doesn’t provide a direct option to control the animation duration specifically for the transform effect within the built-in options. However, you can still achieve this using custom CSS.
In this article, we will show you how to set the animation duration on the transform effect in Divi by leveraging custom CSS.
How to Set the Animation Duration on Transform Effect in Divi
Add a Transform Effect
Well, start by enabling the Visual Builder on the page where you want to add the transform animation. Next, select the element you want to animate, such as a section, row, column, or module. Afterward, open its settings by clicking the gear icon.
In this example, we will add a transform effect to Column.
Next, go to the Design tab in the element’s settings, then find the Transform section. Afterward, add your desired transform effect, such as Scale, Translate, Rotate, or Skew. To make the transform effect animated, apply these settings to hover states by toggling the hover icon.
Add the Custom CSS
Once you add your element’s transform effect to a hover state, you must add CSS to the Main Element.
Navigate to the Advanced tab -> Custom CSS. In the Custom CSS section, under the Main Element field, click the hover icon and then add this CSS code below:
transition: transform 0.9s ease; /* Adjust the duration (0.9s) and easing */
That’s it. Save your page, then preview it to see the result by clicking the Exit Visual Builder button. Once you finish, don’t forget to publish your page if you want to.
What did the CSS code do?
This CSS code smoothly animates changes to the transform property over 0.9 seconds. The meaning of each code segment is as follows:
transition: It specifies the animation when a property changes.transform: The property that will animate (e.g., scaling, rotating, moving).0.9s: Duration of the animation, lasting 0.9 seconds.ease: The timing function that makes the animation start slow, speed up, then slow down at the end, creating a smooth effect.- Other common timing functions include:
linear: The animation progresses at a constant speed from start to finish.ease-in: The animation starts slowly and speeds up.ease-out: The animation starts quickly and then slows down at the end.ease-in-out: The animation starts slow, speeds up, then slows down again.
- Other common timing functions include:
The Bottom Line
Setting the animation duration for transform effects in Divi using custom CSS is a straightforward process that allows for greater control over the timing of animations.
By adding the transition-duration property to your CSS, you can easily customize how long the transform effect takes to complete, enhancing the overall user experience. This method provides flexibility and precision, giving you the power to create smoother and more engaging visual effects within your Divi designs.
