Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | transition Property

  • Last Updated : 19 Oct, 2021

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: 
 

HTML




<!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-delay: .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 arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!