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: 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.
- 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.
- 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-
- CSS | transition-duration Property
- CSS | transition-delay Property
- CSS | transition-timing-function Property
- HTML | DOM Style transition Property
- CSS | transition-property Property
- Semantic-UI | Transition
- ReactJS | Transition Group
- Transition shorthand with multiple properties in CSS?
- How CSS transition work with linear gradient background button?
- CSS | nav-down property
- CSS | nav-right property
- CSS | top Property
- CSS | right Property
- CSS | nav-up property
- CSS | all Property
- CSS | clear Property
- CSS | overflow-x Property
- CSS | nav-left property
- CSS | quotes Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.