I built two hover buttons. One made me uncomfortable

When done right, animations make an interface feel predictable, faster, and more enjoyable to use. They help you and your product stand out.

But they can also do the opposite. They can make an interface feel unpredictable, slow, and annoying. They can even make your users lose trust in your product.

So how do you know when and how to animate to improve the experience?

Step one is making sure your animations have a purpose — Emil Kowalski

Purposeful Animation

Before animating, you need to know the purpose of the animation.
As an example, what's the purpose of this meta UI ( UI that teaches UI) I built?

This animation cominucates correctness vs incorrectness of a hover pattern. Although, not all hover interactions are equal. Some help the user. some don't.

Why one hover feels wrong

According to Material Design 3, motion durations are grouped into four categories: short, medium, long, very long.

Hover interactions fall under short duration, typically within 50ms and 200ms.

In practice though, anything below ~100ms can feel too snappy, while anything above 200ms starts to feel slow and time-wasting. For hover, I would suggest 100-200ms.

This is where the wrong hover fails.

You can feel, just by interacting with the two samples, that one has a longer duration. That extra time introduces friction into an interaction that’s meant to feel instant. It goes against the short-duration principle and makes the interface feel less responsive.

Remember, speed isn’t optional for frequent interactions — Fred-Omojole Omoyele