Connected task: T123908: Transition of focussed text input fields and textareas should be smoother

From my research, we should use very fast animations/transitions, outspoke 0.1s/100ms for all small interface changes (think link, button, focus et al transitions) and predominantely most bigger changes (think opening dialogs, resizing images…), as determined by human perception, "for having the user feel that the system is reacting instantaneously".

It's worth considering that ease-out animations/transitions are preferable over ease-in or ease-in-out values to provide users immediate starting feedback on their interactions. The [[ http://www.the-art-of-web.com/css/timing-function/ | default timing-function value ]] by browser vendors seems to be optimized with that in mind.

I recommend simply avoiding “ease-in” easing for timing functions on button-like elements. (From http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship)

Adding to the "default timing-function value" from above https://www.w3.org/TR/css3-transitions/#transition-timing-function-property

Default is ease
The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

From talk of R. Nabor's talk at Clarity Conf:

• Decelerate (ease-out) human interactions
• Accelerate (ease-in) system-initiated interactions
• Fades and color-changes look best with more linear, subtle curves
• Bounces increase animacy and add an air of "fun"

Longer durations for large(r) movements. And use ms instead of s, because the internals/engine use those anyway.

”When animation is implemented into a design system, it's important to be consistent.”
”Keep animation consistent with your product. It's a physical system of laws.”

As developer code (when coming from JS) is predominantly in milliseconds as the only native animation time unit there, it might be better to stick with ms in CSS.

Thanks @Volker_E, these seem like great insights!

Insights from testing options:
Focus state transitions with ease-out on OOUI input widgets resulted in a laggy feeling.
For human initiated opening dialogs where width is animated, ease-out seems like a good fit in contrast (and a better one than ease).

Related task: T95137: The progress bar should accelerate as it nears completion