CSS Animation Timing Function

HTML-CSS
1

Is there really a difference between ease and ease-in-out in animation-timing-function?

2

Yes, their cubic-bezier values are different.

From MDN:

/* Keyword cubic Bézier easing functions */
ease                  /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in               /* cubic-bezier(0.42, 0, 1, 1) */
ease-out              /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out           /* cubic-bezier(0.42, 0, 0.58, 1) */

Copy the ease values into the editable curve to see a comparison:

TLDR: ease begins more quickly and ends more slowly than ease-in-out.

2 Likes