I am creating a desktop app, and I'm currently implementing animations.

I understand from Material Design Guidelines that I should set the speed for transitions for desktop apps at about 100-250 ms to keep it short. I also understand that the curve used depends on where the object animated is moving to and from.

But I could not find any resources on animating colors when hovering over or pressing an object (e.g. hovering over a button, hover over an item in a navigation drawer, hovering over a back button). In these examples, the color changes from the normal color to a shade or tint of the original.

What is the recommended duration for these kinds of animations (the buttons and objects are generally small)? Currently I am using 25-50ms for these color animations.

What is the recommended easing curve for these kinds of animations? Currently I am debating between EASE_OUT and EASE_BOTH.

  • I think it highly depends on where those color transitions and what those objects are. That would also determine the time and intensity of the transition. Do you have a specific example that we could look at so the answers here are all based on the same demo? Sep 21 '20 at 7:37
  • @Sir Exotic I realised it would be hard to give an example now so I will come back and ask again in a few months time, when I have a basic prototype working. Thanks! Sep 23 '20 at 11:53

Once suggestion is use the inspect too to look at a few buttons on different websites to compare the timing and easing in them.

Normally for animation i'd follow the following

  • When ui elements are entering the screen, use Ease-out animations
  • For ui elements that are exiting, use Ease-in animations which are accelations

The case you mention can be a bit subjective. For color animation which are essentially state changes, you could consider using ease-in-out at around 300ms.


This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .