CSS | transition-property Property

The transition effect is used to display the change in the property of an element over a specified duration. The transition-property property is used to specify the name of the CSS property for which the transition effect will occur.

Syntax:

transition-property: none | all | property | initial | inherit;

Property values:



  • none: This value is used to specify that no property will get a transition effect.

    Syntax:

    transition-property: none;
    

    Example: In the below example, we have specified that none of the property will get a transition effect. Hence if we hover of the box, the changes in its properties will be sudden rather than transitioning from one value to another over a specified duration.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: none;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: none</h2>
        <div class="box"></div>
      </body>
    </html>

    chevron_right

    
    

    Output:

  • all: All the CSS properties will get a transition effect. This is also the default value for this property.

    Syntax:

    transition-property: all;
    

    Example: Instead of specifying the names of all the properties for which we need transition effect, we can also use the all value for the transition-property. This will allow us to display transition effect for all the properties without specifying their names individually which can be shown by the below example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: all;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: all</h2>
        <div class="box"></div>
      </body>
    </html>

    chevron_right

    
    

    Output:

  • property: We can specify the names of CSS properties for which transition effect will be applied. We can also specify multiple properties by separating them with a comma.

    Syntax:

    transition-property: property;
    

    Example: We have specified multiple properties in the below example for transition effect (i.e background-color, width and height) by separating them with a comma. Hence when we hover over the box, we can see the transitions in the properties of the box.


    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: background-color, width, height;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>
         transition-property: 
         background-color, width, height</h2>
        <div class="box"></div>
      </body>
    </html>

    chevron_right

    
    

    Output:

  • initial: Used to set this property to its default value. This value is useful when we don’t know the default value for a specific property.

    Syntax:

    transition-property: initial;
    

    Example: As we have specified the property value as initial in the below example, the default value for this property (which is all) will be assigned to transition-property. Hence, transition effect will occur for all the CSS properties which change as we hover over the box.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: initial;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: initial</h2>
        <div class="box"></div>
      </body>
    </html>

    chevron_right

    
    

    Output:

  • inherit: Used to specify that this property will inherit its value from its parent element.

    Syntax:

    transition-property: inherit;
    

    Example: As we have specified the property value as inherit in the below example, the box will inherit the transition-property value of its property. But in this case, the transition-property value of its parent will be all (as it is the default value) as we haven’t not specified the value for its parent. Hence, transition effect will occur for all the CSS properties.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: inherit;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: inherit</h2>
        <div class="box"></div>
      </body>
    </html>

    chevron_right

    
    

    Output:

Supported browsers: The browsers supported by transition-property Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

I like solving puzzles

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.