CSS | Transitions

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:

  1. 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.
  2. 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).

  3. 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.

  4. 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).

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 form 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 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
change-without-transition

Example: Changing property using transitions.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
change-with-transition



My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.