Nowadays it’s hard to impress or even surprise with an interface
animation. It shows interactions between screens, explains how to use
the application or simply directs a user’s attention. While exploring
the articles about animation, I found out that almost all of them
describe only specific use cases or general facts about animation, but I
haven’t come across any article where all rules concerning animation of
interfaces would be clearly and practically described. Well, in this
article I won’t write anything new, I just want to collect all the main
principles & rules in one place, so that other designers who want to
start animating interfaces don’t have to search for additional
information.
Duration and speed of the animation
When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.
