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.
- HTML | DOM Style transitionTimingFunction property
- CSS | transition-property Property
- CSS | nav-right property
- CSS | all Property
- CSS | top Property
- CSS | nav-down property
- CSS | right Property
- CSS border Property
- Web API | DOMRectReadOnly x property
- CSS | resize Property
- CSS | left Property
- CSS | transition Property
- CSS | perspective Property
- CSS | align-self Property
- Web API | DOMRectReadOnly y property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.