What’s the difference between CSS3 transitions’ ease-in
, ease-out
, etc.?
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.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.