Timing Function

animation-timing-function is CSS property that sets how an animation progresses through the duration of each cycle. So when applying animation, instead of flipping from one from to another, we interpolate between values over given timeframes.

transition: transform 550ms;

For example, this code will tell us whenever the transform property changes, it should take 550 milliseconds to move from the original values to the new values.

linear

linear timing function usually used for circular animation like spinner.

ease-in

ease-in timing function starts slowly and picks up the speed, stopping suddenly at the end of the duration. This timing function is usually used for things that exiting view

ease-out

ease-out is opposite of what ease-in does so can be used for entering the view.

ease-in-out

ease-in-out is the combination of ease-in and ease-out, it features the same amount of acceleration at the start and deceleration at the end. This symmetrical is useful when you want to animate something moving back and forth.

ease

ease is the default timing function when we don't specify one when creating an animation.

This timing function is similar to ease-in-out but is not symmetrical, meaning it quickly accelerates in the beginning but spends most of the time slowing down, and easing to a stop.