Keep animation and transitions short (but not too short)

Keep animation and transitions short (but not too short)

  • 0.25 to 0.3 seconds for microinteractions
  • no longer than 0.5 seconds for more significant animations

The movement should be fast enough that it doesn’t cause waiting, but slow enough that the transition can be understood. For animations and transitions that will be accessed repeatedly, keep it to at 0.25 to 0.3 seconds. For more significant interactions that need attention it should be no longer than 0.5 seconds.

Do not go under 0.25 seconds because animations will appear fast as to appear instantaneous, defeating their purpose.

Further readings:

https://en.wikipedia.org/wiki/Human_processor_model