The transition-timing-function property of CSS describes how a transition will be showcased over its duration. This will allow a transition to change its speed and different movement properties during its course.
The transition-timing-function specifies the time an animation uses to change from one set of CSS transitions to another.
The default value of the transition-timing-function is ‘ease’. This value sets the animation to a slow start then after a time period the speed increases and before it ends the speed again becomes slow.
There are many different values that we can give to this property, some of them are:
- linear – In this, the animation has the same speed from start to end.
- ease-in – This is similar to ease just that the end of the animation is fast.
- ease-out – This too is similar to ease just that the start of the animation is fast.
- initial – This sets the property to its default value.