css - Difference between CSS3 transitions' ease-in and ease-out

Question

What’s the difference between CSS3 transitions’ ease-in, ease-out, etc.?

Answer 1

CSS3's transitions and animations support easing, formally called a "timing function". The common ones are ease-in, ease-out, ease-in-out, ease, and linear, or you can specify your own using cubic-bezier().

• ease-in will start the animation slowly, and finish at full speed.
• ease-out will start the animation at full speed, then finish slowly.
• ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
• ease is like ease-in-out, except it starts slightly faster than it ends.
• linear uses no easing.
• Finally, here's a great description of the cubic-bezier syntax, but it's usually not necessary unless you want some very precise effects.

Basically, easing out is to slow to a halt, easing in is to slowly accelerate, and linear is to do neither. You can find more detailed resources at the documentation for timing-function on MDN.

And if you do want the aforementioned precise effects, the amazing Lea Verou’s cubic-bezier.com is there for you! It’s also useful for comparing the different timing functions graphically.

Another, the steps() timing function, acts like linear, but only performs a finite number of steps between the transition’s beginning and its end. steps() has been most useful to me in CSS3 animations, rather than in transitions; a good example is in loading indicators with dots. Traditionally, one uses a series of static images (say eight dots, two changing colour each frame) to produce the illusion of motion. With a steps(8) animation and a rotate transform, you’re using motion to produce the illusion of separate frames! How fun.