CSS animation-timing-function Property
This function describes how the speed of an animation will change.
By speed we mean the time an animation uses to change from one set of CSS styles to another.
This property is used to describe how the animation will play.
animation-timing-function: timingfunction [,timingfunction2,...timing functioN]
where timingfunction is one of the following values -
cubic-bezier(number,number,number,number) | ease | ease-in | ease-in-out | ease-out | linear
Now we will see a few most important value -
Animation moves with constant speed from start to end
The animation will start slow, then fast, before it ends slow.
And this is the default value.
The animation will start slow
The animation will end slow
The animation will start slow start go fast in the middle ,and a slow end
Now we will see example -
Output - Sample output would be -