Transition shorthand with multiple properties in CSS?

The transition property in CSS is used to create some transition in an element. This property change the value smoothly. This article contains hover effect over a div element to change the width and height of elements after transition.
The list of transition property are given below:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

syntax:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color:Green;
                text-align:center;
            }
            h3 {
                text-align:center;
            }
            input[type=text] {
                width: 100px;
                -webkit-transition: width .35s ease-in-out;
                transition: width .35s ease-in-out;
            }
            input[type=text]:focus {
                width: 250px;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>Search: <input type="text" name="searchbox"></h3>
    </body>
</html>                    

chevron_right


Output:
transition
Note: If the duration part is not specified, the transition will have no effect, because its default value is 0. The transition property specify mainly two things. The first one is the CSS property to add effects and second one is the duration unless the transition will be effect less.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style
            h1 {
                color:Green;
            }
            div {
                width: 1px;
                height: 0px;
                text-align:center;
                background: Green;
                -webkit-transition: width 2s, height 2s; 
                transition: width 2s, height 2s;
            }
            div:hover {
                width: 300px;
                height: 240px;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <div>
        <img src=
        align="middle"></div>
    </body>
</html>                    

chevron_right


Output:
transition



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.