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.
Syntax -
|
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 -
1. linear
Animation moves with constant speed from start to end
2. ease
The animation will start slow, then fast, before it ends slow.
And this is the default value.
3. ease-in
The animation will start slow
4. ease-out
The animation will end slow
5. ease-in-out
The animation will start slow start go fast in the middle ,and a slow end
Now we will see example -
Example -
Output - Sample output would be -
