CSS transition timing function Property
CSS transition-timing-function Property
The transition-timing-function property is used to specify the speed curve of the transition effect. It allows a transition effect to change speed over its duration.
Default Value:-
Its default value is ease.
Syntax:-
Its syntax is:- transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit;
Further Explanation:-
Value | Description |
---|---|
ease | Specifies a transition effect with a slow start, then fast, then end slowly. |
linear | Specifies a transition effect with the same speed from start to end. |
ease-in | Specifies a transition effect with a slow start. |
ease-out | Specifies a transition effect with a slow end. |
ease-in-out | Specifies a transition effect with a slow start and end. |
step-start | Equivalent to steps(1, start). |
step-end | Equivalent to steps(1, end). |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function and is a positive integer. The second parameter is optional and has a value start or end, and specifies the point at which the change of values occurs within the interval. |
cubic-bezier(n,n,n,n) | Define custom values in the cubic-bezier function. |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |