CSS Transition
CSS Transitions allow for smooth and gradual changes in the style of an element without the need for Flash or JavaScript. They provide a way to add animated effects to elements, making the transition from one style to another.
To create a transition effect, you need to specify two things:
-
CSS Property: You specify the CSS property that you want to add the transition effect to. This can be properties like color, background-color, width, height, etc.
-
Duration: You specify the time duration for the transition effect to take place. This is typically specified in seconds or milliseconds.
Note:- Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable.
Input:-
Output:-
Transition properties
Following are the transition properties supported:-
|
Property |
Description |
|
transition |
A shorthand property for setting all four individual transition properties in a single declaration. |
|
transition-delay |
Specifies when the transition will start. |
|
transition-duration |
Specifies the number of seconds or milliseconds a transition animation should take to complete. |
|
transition-property |
Specifies the names of the CSS properties to which a transition effect should be applied. |
|
transition-timing-function |
Specifies how the intermediate values of the CSS properties being affected by a transition will be calculated. |
Performing multiple transitions
Each of the transition properties can accept multiple values, separated by commas. This allows for the convenient definition of multiple transitions at once, each with its own unique settings.
Input:-
Output:-
Transition shorthand property
When applying transitions, there are several properties to consider. However, it is possible to specify all the transition properties using a single shorthand property, which helps to reduce the amount of code.
The transition property allows you to set all the individual transition properties, such as transition-property, transition-duration, transition-timing-function, and transition-delay, in one declaration. The properties should be listed in the order mentioned.
By using the transition shorthand property, you can streamline your code and make it more concise.
Input:-
Output:-
Note:- If any value is missing or not specified, the default value for that property will be used instead. That means, if the value for transition-duration property is missing, no transition will occur, because its default value is 0.
