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