Black Friday Sale! Save up to 50% off!

How to change Hover Duration for your website animations

You can manage hover animation by setting its Duration. Set Duration for Animation on Hover add or select an Element and go to the Property Panel. Select the Animation On section's Hover link and choose the Hover checkbox. The supported values for the Slider are from 10 to 200, and you can enter a bigger number into this field if needed.

Browse By Feature Categories

Everything You Need To Create Your Free Website

Use our Website Builder to design and create websites without coding. Drag and drop anything you want, to any place you want it. The Website Creator automatically adapts your website for mobile to make it responsive. Choose from more than 15,000 customisable website templates.

Related Features

How To Change Duration For The Hover Animations Easily

Most modern web animations use CSS transitions to make the final effect more smooth and realistic. Especially it is important when your element should use a hover effect. It requires smooth animation not to cause the visitor's repulsion or discomfort. But not everyone can precisely describe how their animated element should transition from the first to the last keyframe of the animation. And the CSS transitions can take time to master their specifics. Our builder can provide a simple and precise tool with the transition timing function to help you set the hover animations any way you want, unlike CSS transitions.

Using hover effect animation, you can surprise your visitor and draw his attention. It will make an element move when the visitor's mouse hovers over it. Yet to provide an excellent user experience, you must use the timing function, which means customizing the time it takes for the animation to complete when the user's cursor hovers over the element, similar to a CSS transition. Go to hovers over transition property in the right panel to customize it. After selecting the hover animations, you will see the duration slider under it. Using 1 to 10 positions, customize the transitions animation completion time, making it smoother or rapid.

This simple action will help you control the element and put different transitions into different states. Those animations and effects are very popular in social media, so keep them in mind while building your site. If you want your site to specialize in social media, try to customize your animations to create a unique ecosystem for your site. Look through other hover animation examples in our template section, or experiment yourself to discover new unique combinations after reading the terms of service.