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

what’s difference between css3 transitions’ ease-in, ease-out, etc.?

css3's transitions , animations support easing, formally called "timing function". common ones ease-in, ease-out, ease-in-out, ease, , linear, or can specify own using cubic-bezier().

• ease-in start animation slowly, , finish @ full speed.
• ease-out start animation @ full speed, finish slowly.
• ease-in-out start slowly, fastest @ middle of animation, finish slowly.
• ease ease-in-out, except starts faster ends.
• linear uses no easing.
• finally, here's great description of cubic-bezier syntax, it's not necessary unless want precise effects.

basically, easing out slow halt, easing in accelerate, , linear neither. can find more detailed resources @ documentation timing-function on mdn.

and if want aforementioned precise effects, amazing lea verou’s cubic-bezier.com there you! it’s useful comparing different timing functions graphically.

another, the steps() timing function, acts linear, performs finite number of steps between transition’s beginning , end. steps() has been useful me in css3 animations, rather in transitions; example in loading indicators dots. traditionally, 1 uses series of static images (say 8 dots, 2 changing colour each frame) produce illusion of motion. steps(8) animation , rotate transform, you’re using motion produce illusion of separate frames! how fun.