100ms: Under this, and the user feels it's instantaneous
1 second: After this, and the user's flow of thought is interrupted
10 seconds: The upper limit of attention.
Animations should be between 200 and 500ms, depending on complexity. Shorter durations for simpler effects, longer durations for more complex movements:
(courtesy of Val Head)
Sometimes it's better for the animation to be a little longer, so the user doesn't feel surprised by how quickly something is done.
A few more guidelines:
For buttons and dropdowns: 100-250ms
For panels and modals: 250-400ms
Page transitions: 500ms +
Where applicable, we can use our branded loading animation for processes taking up to 10 seconds. It's been shown that users were willing to wait longer and abandon rates were lower with branded animations.
For loading operations taking longer than 10 seconds, percent-done progress indicators should be used if possible.
Easing (or, obey the laws of physics)
It’s important for animations to mimic the laws of physics so that they feel natural and intuitive to users. In web animation terms, this is called "easing."
For objects entering the view, use ease-out
For objects exiting the view, use ease-in
For moving an object from point to point, use ease-in-out(when in doubt, use this)