Skip to content
Related Articles

Related Articles

CSS | transition Property

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

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!