Button Hover animation instantaneous - not fading

Design help Animations & Interactions
1

Hi all!

This is my first post here, and I apologize if this question has been asked before. I’ve searched the forum but couldn’t find a problem similar to mine, so thought I’d ask here.

I have a menu button on my site that I want to change color on hover. I set up the transition and hover states, but for some reason the background color transition is instantaneous.

I’ve tried editing the transition time from 200ms to 500, 1000, even 2000ms to make sure it wasn’t just too fast for me to process, and I’ve also tried adjusting the easing curves. I’ve watched the webflow tutorials but haven’t been able to figure it out.

My apologies if this is a very rudimentary error!

Here is my public share link: LINK
(how to access public share link)

2

Hi there!

To create smooth transitions between element states in Webflow, follow these steps:

  1. Select the element you want to animate
  2. In the Style panel, locate the Transitions section
  3. Click the + icon to add a transition
  4. Choose which properties you want to animate (e.g., All, Transform, Background)
  5. Adjust the duration (default is 200ms, increase to 500ms or more for slower transitions)
  6. Select an easing type to control how the animation accelerates and decelerates

Remember to style both your None state and any interaction states (like Hover) with the properties you want to transition between. The transition will smoothly animate any differences between these states.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

The issue is that I’ve already attempted to do that:

image
image551×801 39.8 KB

image
image557×827 40.8 KB

image
image553×761 38.9 KB

I’ve attached the settings for both the hover and none states if anyone can help

4

Hi Ellis,

Unfortunately CSS doesn’t animate background images or linear gradients.
A solution for you could be having an overlay with the second gradient and animating it’s opacity.

Otherwise you could try rotating it? Depends what you’re trying to achieve.
Another option for you would be to have a Lottie, but I’m unsure weather you can actually do that in Lottie.

5

Thank you so much! The opacity trick worked perfectly

1 Like