CSS Transition

These are effects that are added to change the element gradually from one style to another, without using flash or JavaScript.

To make the transition occur, we must specify at least two things — The CSS property on which you want to add an effect, the time duration of the effect.  

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:-

Index.html
	
<body>   
    <button>Hover me for transition.</button>
</body>
Style.css
button {  
    background: #fd7c2a;
    border: 3px solid #dc5801;
    -webkit-transition-property: background;
    -webkit-transition-duration: 1s;
    transition-property: background;
    transition-duration: 1s;
}

Output:-


Transition properties

Following is the transition properties supported:-

PropertyDescription
transitionA shorthand property for setting all the four individual transition properties in a single declaration.
transition-delaySpecifies when the transition will start.
transition-durationSpecifies the number of seconds or milliseconds a transition animation should take to complete.
transition-propertySpecifies the names of the CSS properties to which a transition effect should be applied.
transition-timing-functionSpecifies how the intermediate values of the CSS properties being affected by a transition will be calculated.

Performing multiple transition

Each of the transition properties can take more than one value, separated by commas, which provides an easy way to define multiple transitions at once with different settings.

Input:-

Index.html
	
<body>   
    <button>Hover me for transition.</button>
</body>
Style.css
button {  
    button {
    background: #fd7c2a;
    border: 3px solid #dc5801;
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 1s, 2s;
    transition-property: background, border;
    transition-duration: 1s, 2s;
}
button:hover {
    background: #3cc16e;
    border-color: #288049;
}

Output:-


Transition shorthand property

There are many properties to consider when applying the transitions. However, it is also possible to specify all the transition properties in one single property to shorten the code.

The transition property is a shorthand property for setting all the individual transition properties (i.e., transition-property, transition-duration, transition-timing-function, and transition-delay) at once in the listed order.

Input:-

Index.html
	
<body>   
    <button>Hover me for transition.</button>
</body>
Style.css
button {
    background: #fd7c2a;
    -webkit-transition: background 2s ease-in 0s; 
    transition: background 2s ease-in 0s; 
}
button:hover {
    background: #3cc16e;
}

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.