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. |
Code Explanation
All Tutorials related to CSS3
CSS3 Intro
Vendor Prefixes
Border Radius Property
Box Shadow Property
Transparency
Text Shadow
Pseudo Classes
Pseudo Elements
Word Wrap
@Font-Face
Linear Gradients
Radial Gradient
Background Size
Background Clip
Opacity
Transitions
Transform Rotate
Translate Skew
Scale and Multiple
Animations
Animation Properties
3D Transform
CSS Filters 1
CSS Filters 2
CSS Filter 3
