CSS transition-timing-function Property
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.
Syntax:
animation-timing-function: <easing-function>|ease|linear|ease-in |ease-out|ease-in-out|cubic-bezier(p1, p2, p3, p4)|steps(n, <jumpterm>) |step-start|step-end|initial;
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. The initial value of this property value is ease.
Example:
html
<!DOCTYPE html> < html > < head > < style > div { height: 75px; width: 75px; background: yellowgreen; color: red; transition: width 5s; } #div1 { transition-timing-function: linear; } #div2 { transition-timing-function: ease; } #div3 { transition-timing-function: ease-in; } #div4 { transition-timing-function: ease-out; } div:hover { width: 300px; } </ style > </ head > < body > < h1 >The transition-timing-function Property.</ h1 > < p > This is an example for linear value in transition-timing-function property. < div id = "div1" >linear</ div > </ p > < p > This is an example for ease value in transition-timing-function property. < div id = "div2" >ease</ div > </ p > < p > This is an example for ease-in value in transition-timing-function property < div id = "div3" >ease-in</ div > </ p > < p > This is an example for ease-out value in transition-timing-function property. < div id = "div4" >ease-out</ div > </ p > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 26
- Internet Explorer 10
- Firefox 16
- Safari 9
- Opera 12.1
- Edge 12