Transition Property in CSS
Transition
CSS3 transitions allow us to change from one property value to another over a given duration.
Transition property consists of:-
- transition-property:- specifies the property to be transitioned
- transition-duration:- specifies the duration over which transitions should occur
- transition-timing-function:- specifies how the pace of the transition changes over its duration
- transition-delay:- specifies a delay (in seconds) for the transition effect.
Syntax:-
Its syntax is:-
< style >
element{
transition: property duration timing-function delay| initial| inherit;
}
< /style >
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for. |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete. |
transition-timing-function | Specifies the speed curve of the transition effect. |
transition-delay | Defines when the transition effect will start. |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
The transition-timing-function property specifies the speed curve of the transition effect.
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. |