CSS | Transitions

09 Aug, 2019
Transitions in CSS allows us to control the way in which transition takes place between the two states of the element. For example, when on hovering your mouse over a button, you can change the background color of the element with help of CSS selector and pseudo-class. We can change any other or combination of properties, though. Transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes, and make the changes visually appealing to the user and hence, giving better user experience and interactivity. In this article, we will show you how to animate the transition between the CSS properties.
There are four CSS properties which you should use, all or in part (at least two, transition-property and transition-duration, is must), to animate the transition. All these properties must be placed along with other CSS properties of the initial state of the element:
transition-property: This property allows you to select the CSS properties which you want to animate during transition(change).Syntax:transition-property: none | all | property | property1,
property2, ..., propertyN;
Values:none is used to specify that no property should be selected.all is used to specify all the properties to be selected, though not all properties are animate-able, only the properties which are animate-able will be influenced.We can specify a single property or a set of comma separated properties property1, property2, ..., propertyN.transition-duration: This property allows you to determine how long it will take to complete the transition from one CSS property to the other.Syntax:transition-duration: time;
Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes).transition-timing-function: This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc.Syntax:transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;
Note, there are other values which this transition-timing-function can take, only the most frequent and simple are mentioned here.transition-delay: This property allows you to determine the amount of time to wait before the transition actually starts to take place.Syntax:transition-delay: time;
Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes).
transition-property: This property allows you to select the CSS properties which you want to animate during transition(change).Syntax:transition-property: none | all | property | property1,
property2, ..., propertyN;
Values:none is used to specify that no property should be selected.all is used to specify all the properties to be selected, though not all properties are animate-able, only the properties which are animate-able will be influenced.We can specify a single property or a set of comma separated properties property1, property2, ..., propertyN.
Syntax:
transition-property: none | all | property | property1,
property2, ..., propertyN;

Values:
none is used to specify that no property should be selected.
all is used to specify all the properties to be selected, though not all properties are animate-able, only the properties which are animate-able will be influenced.
We can specify a single property or a set of comma separated properties property1, property2, ..., propertyN.
transition-duration: This property allows you to determine how long it will take to complete the transition from one CSS property to the other.Syntax:transition-duration: time;
Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes).
Syntax:
transition-duration: time;

Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes).
transition-timing-function: This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc.Syntax:transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;
Note, there are other values which this transition-timing-function can take, only the most frequent and simple are mentioned here.
Syntax:
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;

Note, there are other values which this transition-timing-function can take, only the most frequent and simple are mentioned here.
transition-delay: This property allows you to determine the amount of time to wait before the transition actually starts to take place.Syntax:transition-delay: time;
Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes).
Syntax:
transition-delay: time;

Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes).
The Shorthand Property You can combine all the four transition properties mentioned above, into one single shorthand property, according to the syntax given below. This saves us from writing long codes and prevents from getting messy. Note the ordering of property, it has significance.
Syntax:
transition: (property name) | (duration) | (timing function) | (delay);

The value is taken by are same as mentioned above. This property must be placed with other CSS properties, if any, of the initial state. You should use at least, property name and duration to get any animate-able effect. Also, the ordering of the values matters. The first value is of the property name, second for the duration and so on, as listed above. So, if only one number is mentioned, it will be taken up as duration, and not as a delay.
Example: Changing property without using transitions.
<!DOCTYPE html><html>  <head>    <title>CSS Transition</title>      <style>      h1{        color: green;        text-align: center;      }      div.one{        height: 150px;        width: 150px;        border: 1px dashed black;        margin: 0 auto;        background: #FFEBEE;      }      div.one:hover{        height: 300px;        width: 300px;        background: #BBDEFB;      }    </style>    </head>      <body>         <h1>GeeksForGeeks</h1>         <div class="one">       </div>    </body></html>
Output:
Example: Changing property using transitions.
<!DOCTYPE html><html>  <head>    <title>CSS Transition</title>      <style>      h1{        color: green;        text-align: center;      }      div.one{        height: 150px;        width: 150px;        border: 1px dashed black;        margin: 0 auto;        background: #FFEBEE;        transition: height 2s, width 2s, background 2s;      }      div.one:hover{        height: 300px;        width: 300px;        background: #BBDEFB;      }    </style>    </head>    <body>      <h1>GeeksForGeeks</h1>      <div class="one">    </div>    </body>  </html>
Output:
Supported browsers: The browsers supported by Transition are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?