CSS | transition Property

The transition property in CSS is used to make some transition effect. The transition is the combination of four properties which are listed below:

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

Note: The transition effect can be defined in two states (hover and active) using pseudo-classes like : hover or: active or classes dynamically set by using JavaScript.

Syntax:



transition: transition-property transition-duration 
transition-timing-function transition-delay; 

Note: If any of the values are not defined then the browser assumes the default values.

Property Values:

  • transition-property: It specifies the CSS properties to which a transition effect should be applied.
  • transition-duration: It specifies the length of time a transition animation should take to complete.
  • transition-timing-function: It specifies the speed of transition.
  • transition-delay: It specifies the transition delay or time when transition starts.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS transition Property
        </title>
          
        <style
            div {
                width: 100px;
                height: 270px;
                background: green;
                transition: width 5s ease-in .2s;
                display: inline-block;
            }
              
            div:hover {
                width: 300px;
            }
        </style>
    </head>
      
    <body style = "text-align:center;">
          
        <h1>GeeksforGeeks</h1>
          
        <h2>Transition Property</h2>
          
        <div>
            <p>transition-property: width</p>
            <p>transition-duration: 5s</p>
            <p>transition-timing-function: ease-in</p>
            <p>transition-dealy: .8s</p>
        </div>
    </body>
</html>                    

chevron_right


Output:

  • Before Transition Effect:
  • After Transition Effect:

Supported Browsers: The browser supported by transition property are listed below:

  • Google Chrome 26.0, 4.0 -webkit-
  • Internet Explorer 10.0
  • Firefox 16.0, 4.0 -moz-
  • Safari 6.1, 3.1 -webkit-
  • Opera 12.1, 10.5 -o-


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.




Article Tags :

Be the First to upvote.


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