Skip to content
Related Articles

Related Articles

CSS | transition Property

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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 and above
  • Edge 12 and above
  • Internet Explorer 10 and above
  • Firefox 16 and above
  • Opera 12.1 and above
  • Safari 9 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!