Open In App
Related Articles

CSS transition Property

Improve Article
Improve
Save Article
Save
Like Article
Like

The transition property in CSS is used to make some transition effects. 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 the transition starts.

Example: In this example, we are using the above-explained property.

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: 

 

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

  • Google Chrome 26 and above
  • Edge 12 and above
  • Internet Explorer 10 and above
  • Firefox 16 and above
  • Opera 12.1 and above
  • Safari 9 and above

Last Updated : 19 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials