Nowa­days it’s hard to impress or even sur­prise with an inter­face ani­ma­tion. It shows inter­ac­tions between screens, explains how to use the appli­ca­tion or sim­ply directs a user’s atten­tion. While explor­ing the arti­cles about ani­ma­tion, I found out that almost all of them describe only spe­cif­ic use cas­es or gen­er­al facts about ani­ma­tion, but I haven’t come across any arti­cle where all rules con­cern­ing ani­ma­tion of inter­faces would be clear­ly and prac­ti­cal­ly described. Well, in this arti­cle I won’t write any­thing new, I just want to col­lect all the main prin­ci­ples & rules in one place, so that oth­er design­ers who want to start ani­mat­ing inter­faces don’t have to search for addi­tion­al infor­ma­tion.

When ele­ments change their state or posi­tion, the dura­tion of the ani­ma­tion should be slow enough to give users the pos­si­bil­i­ty to notice the change, but at the same time quick enough not to cause wait­ing.

Numer­ous research­es have dis­cov­ered that opti­mal speed for inter­face ani­ma­tion is between 200 and 500 ms. These fig­ures are based on the par­tic­u­lar qual­i­ties of the human brain. Any ani­ma­tion short­er than 100 ms is instan­ta­neous and won’t be rec­og­nized at all. Where­as the ani­ma­tion longer than 1 sec­ond would con­vey a sense of delay and thus be bor­ing for the user.