Nowadays it\u2019s hard to impress or even surprise with an interface \nanimation. It shows interactions between screens, explains how to use \nthe application or simply directs a user\u2019s attention. While exploring \nthe articles about animation, I found out that almost all of them \ndescribe only specific use cases or general facts about animation, but I\n haven\u2019t come across any article where all rules concerning animation of\n interfaces would be clearly and practically described. Well, in this \narticle I won\u2019t write anything new, I just want to collect all the main \nprinciples & rules in one place, so that other designers who want to\n start animating interfaces don\u2019t have to search for additional \ninformation.
<\/p>\n\n\n\n
When elements change their state or position, the duration of the \nanimation should be slow enough to give users the possibility to notice \nthe change, but at the same time quick enough not to cause waiting.<\/p>\n\n\n\n
Numerous researches have discovered \nthat optimal speed for interface animation is between 200 and 500 ms. \nThese figures are based on the particular qualities of the human brain. \nAny animation shorter than 100 ms is instantaneous and won\u2019t be \nrecognized at all. Whereas the animation longer than 1 second would \nconvey a sense of delay and thus be boring for the user.<\/p>\n","protected":false},"excerpt":{"rendered":"
Nowadays it\u2019s 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\u2019s attention. While exploring the articles about animation, I found out that almost all of them describe… <\/p>\n