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:

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

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

Suggest a Topic

Recommended Posts: